@charset "utf-8";

/* 공통
------------------------------------------------------ */
.sub-title { 
	font-weight:700; font-size:24px; line-height:1;
    font-family: 'SpoqaHanSansNeo', sans-serif;
	color:var(--color-dark-gray, #333);
}

/* 로그인
------------------------------------------------------ */
.login-wrap { 
	width:100%; min-height:100vh;
	background:url('/html/images/login/login_bg.webp') no-repeat left bottom;
	background-size:auto 100%;
	background-attachment:fixed;
}
.login-wrap .login-inner { 
	margin:0 auto; padding:70px 110px 20px;
	width:640px;
}
.login-wrap .login-btn.mb {margin-bottom:50px;}
.login-wrap .login-title { 
	font-weight:700; font-size:28px; line-height:1;
	color:var(--color-dark-gray, #333);
}

.login-wrap .logo { 
	margin-bottom:70px;
	line-height:0;	 
}
.login-wrap .logo img {max-width:250px;}

.login-wrap .login-form { 
	margin-top:50px; 
}
.login-wrap .login-btn { 
	margin:30px 0 10px;
}
/* .login-wrap .login-btn button { 
	width:100%; 
} */
.login-btn button { 
	width:100%; 
}


.login-wrap .login-utils { 
	/* font-size:0;	  */
    display:flex;
    align-items:center;
}
.login-wrap .login-utils > * { 
	display:inline-block;
	vertical-align:middle;
}
.login-wrap .login-utils .checkbox-wrap {
	width:120px;
}
.login-wrap .find-wrap { 
	/* width:calc(100% - 120px);
	text-align:right;  */
    margin-left:auto;
}
.login-wrap .find-wrap li { 
	position:relative;
	display:inline-block;
	padding:0 13px;
	vertical-align:middle;
}
.login-wrap .find-wrap li:last-child { 
	padding-right:0; 
}
.login-wrap .find-wrap li:before { 
	content:'';
	position:absolute; top:50%; left:0;
	margin-top:-8px;
	width:1px; height:16px;
	background:var(--color-dark-gray, #333);
}
.login-wrap .find-wrap li:first-child:before { 
	display:none; 
}
.login-wrap .find-wrap li a { 
	display:block; 
	font-size:16px;
	color:var(--color-dark-gray, #333);
}

.login-wrap .sns-login-wrap { 
	margin-top:60px;
	padding-top:60px; 
	border-top:1px solid #eee;
}
.login-wrap .sns-login-wrap h1 { 
	font-weight:400; font-size:16px; line-height:1;
	color:var(--color-dark-gray, #333);
	text-align:center;
}
.login-wrap .sns-login { 
	margin:30px 0;
	/* font-size:0; */
	text-align:center;
    display:flex;
    justify-content:center;
}
.login-wrap .sns-login li { 
	display:inline-block;
	margin:0 10px; 
	vertical-align:top;
}
.login-wrap .sns-login li a { 
	display:block;
	width:60px; height:60px;
	border-radius:50%;
	font-size:0;
}
.login-wrap .sns-login li.naver a { 
	background:#03c75a url('/html/images/login/sns_naver.png') no-repeat center center;
}
.login-wrap .sns-login li.kakao a { 
	background:#fee500 url('/html/images/login/sns_kakao.png') no-repeat center center;
}
.login-wrap .sns-login li.facebook a { 
	background:#166fe5 url('/html/images/login/sns_facebook.png') no-repeat center center;
}
.login-wrap .sns-login li.google a { 
	background:#f5f5f5 url('/html/images/login/sns_google.png') no-repeat center center;
}
.login-wrap .sns-login li.twitter a { 
	background:#1da1f2 url('/html/images/login/sns_twitter.png') no-repeat center center;
}

.login-wrap .join-info { 
	width:100%;
	border-radius:4px;
	background:#f5f5f5;
	font-size:16px; line-height:60px;
	color:var(--color-dark-gray, #333);
	text-align:center;
}
.login-wrap .join-info a { 
	display:inline-block;
	font-weight:500;
	text-decoration:underline;
}

/* 아이디찾기 */
.login-wrap .login-form.find-id li { 
	margin-top:20px; 
}
.login-wrap .login-form.find-id li:first-child { 
	margin-top:0; 
}

/* 결과 */
.login-wrap .find-result { 
	margin:13px 0 0;	 
}
.login-wrap .find-result .find-info { 
	font-size:18px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.login-wrap .find-result .find-result-txt { 
	margin:37px 0 40px; padding:61px 10px;
	border-radius:4px;
	background:#f5f5f5;
	text-align:center;
}
.login-wrap .find-result .find-result-txt p { 
	font-weight:500; font-size:20px;
	color:var(--color-dark-gray, #333);
}
.login-wrap .find-result .find-txt { 
	margin-top:-20px;	 
}
.login-wrap .find-result .find-txt li { 
	margin:3px 0;
	font-size:15px;
	color:var(--color-gray, #aaa);
	letter-spacing:-0.5px;
	word-break:keep-all;
}


/* 회원가입 */
.login-wrap .sub-tit {
	margin-top:75px; margin-bottom:-35px;
	font-weight:700; font-size:18px;
	color:var(--color-gray, #aaa);
}

.login-wrap .sub-tit + .login-form > li > label {
	margin-top:20px;
}
.login-form .input-button {display:flex;} 
.login-form .input-button input {flex-grow:1;}
.login-form .input-button input + button {flex-shrink:0; margin-left:10px;}

.login-form li { 
	position:relative;
	margin-top:20px; 
}
.login-form li:first-child { 
	margin-top:0; 
}
.login-form li > label { 
	display:block;
	font-size:15px; line-height:30px;
	color:var(--color-primary, #0148d4);
}
.login-form li input { 
	width:100%; height:40px;
	border:0 none; border-bottom:1px solid var(--color-light-gray, #ccc);
	font-size:18px;
	color:var(--color-dark-gray, #333);
    padding:0 2px;
}
.login-form li input:focus {
	border-bottom:2px solid var(--color-dark-gray, #333);
}
.login-form li input::placeholder { 
	color:var(--color-gray, #aaa); 
}
.login-form li input[type=text]:read-only {background:#eee; border-radius:10px; border-bottom:none;}
.login-form li input.in-button {padding:0 42px 0 2px;}
.login-form li .btn-del { 
	position:absolute; bottom:0; right:-9px;
	padding:9px;
	width:auto !important; height:42px;
	background:none;
}
.login-form li [class^="btn"]:disabled {
	border-color:var(--color-gray, #aaa);
	color:var(--color-gray, #aaa);
}
.login-form li [class^="btn"] {
	display:inline-block;
	width:120px; 
}
.login-form li.tel {
	font-size:0;
}
.login-form li.tel input {
	display:inline-block;
	margin-right:10px;
	width:calc(100% - 130px);
	vertical-align:top;
}
.login-form li .certification-number {
	position:relative;
	margin-top:10px;
    display:flex;
}
.login-form li .certification-number input {
	width:50%;
}
.login-form li .certification-number span {
	display:block;
    flex-grow:1;
    margin-right:15px;
    font-size:14px; line-height:40px;
	color:var(--color-primary, #0148d4);
	text-align:right;
}

.login-form li.no-label {
	margin-top:40px;
}
/* .login-form li select {
	padding:0 20px;
	width:100%; height:50px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
	font-size:18px;
	color:var(--color-dark-gray, #333);
    background-color:#fff;
} */
.login-form li :is(.checkbox-wrap,.radio-wrap) {
	margin-top:5px;
	/* font-size:0; */
}
.login-form li :is(.checkbox-wrap,.radio-wrap) li  {
	display:inline-block;
	margin:0 20px 5px 0;
	vertical-align:top;
}
.login-form li .checkbox-wrap {
	width:auto;
}
.login-form li :is(.checkbox-wrap,.radio-wrap) li label {
	line-height:24px;
	color:var(--color-dark-gray, #333);
}
.login-form li.email {
	font-size:0;
}
.login-form li.email input {
	display:inline-block;
	width:calc(100% - 200px); height:50px;
	vertical-align:top;
}
.login-form li.email span {
	display:inline-block;
	width:40px;
	font-size:18px; line-height:50px;
	color:var(--color-dark-gray, #333);
	text-align:center;
	vertical-align:top;
}
.login-form li.email select {
	display:inline-block;
	width:160px;
	vertical-align:top;
}
.login-form li.birthday {
	/* font-size:0; */
    display:flex;
    flex-wrap:wrap;
}
.login-form li.birthday label {width:100%;}
.login-form li.birthday select {
	display:inline-block;
	margin-left:10px;
	width:calc(30% - 7px);
	vertical-align:top;
}
.login-form li.birthday select:first-of-type {
	margin-left:0;
	width:calc(40% - 7px);
}
.login-form li.address {
	font-size:0;
}

.login-form li.address :is(input:nth-of-type(1),input:nth-of-type(2)) {
	padding:0 12px;
	height:40px;
	border-radius:10px;
	border-bottom:0 none;
	background:#eee;
}
.login-form li.address input:nth-of-type(1) {
	display:inline-block;
	margin-right:10px;
	width:20%;
	min-width:80px;
	vertical-align:top;
}
.login-form li.address input:nth-of-type(2) {
	margin:10px 0;
}
.login-form li.error input {
	border-bottom-color:#ff8e20;	
}
.login-form li .error-txt {
	display:block;
	margin-top:10px;
	font-size:12px; line-height:16px;
	color:#ff8e20;
}
.login-form li .error-txt img {
	display:inline-block;
	margin-right:6px;
	vertical-align:top;
}
.login-form li .select-file {
	padding-bottom:9px;
	border-bottom:1px solid var(--color-light-gray, #ccc);
}
.login-form li textarea {
	font-size:18px; 
	border:1px solid var(--color-light-gray, #ccc); 
	width:100%; 
	height:200px;
	padding:10px;
	line-height:1.5em;
	resize:none;
}

.login-form .attach-file {
    position:relative;
    padding-right:15px;
    display:inline-block;
}
.login-form .attach-file img {
    width:80px;
    cursor:pointer;
}
.login-form .attach-file .btn-delete {
    position:absolute;
    top:3px;
    right:15px;
    width:30px;
    z-index:10;
    cursor:pointer;
}
.login-form .attach-file .btn-delete img {
    width:100%;
}

.agree-wrap .all-select {
	margin-bottom:4px;
	padding-bottom:22px;
	width:100% !important;
	border-bottom:1px solid var(--color-light-gray, #ccc);
}
.agree-wrap .all-select label {
	font-weight:500;
	font-size:22px;
	letter-spacing:-1px;
}
.agree-wrap li {
	margin:16px 0;
	/* font-size:0; */
    display:flex;
    align-items:center;
}
.agree-wrap li strong {
	font-weight:400;
	color:var(--color-red, #dc3545);
}
.agree-wrap li span {
	color:var(--color-gray, #aaa);
}
.agree-wrap .checkbox-wrap {
	display:inline-block;
	width:calc(100% - 70px);
	vertical-align:middle;
}
.agree-wrap a {
	display:inline-block;
	width:70px;
	background:url('/html/images/sub/mypage/arrow_g.png') no-repeat right center;
	font-size:14px;
	color:var(--color-gray, #aaa);
	vertical-align:middle;
}

.popup-wrap.agree {
}
.popup-wrap.agree .popup-inner {
	max-height:550px;
}
.popup-wrap.agree .agree-popup-conts {
	overflow-x:hidden;
	margin-top:40px;
	padding:15px 20px;
	width:100%; height:300px;
	border:1px solid var(--color-light-gray, #ccc);
}
.popup-wrap.agree .agree-popup-conts p {
	font-weight:300; font-size:14px; line-height:21px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.popup-wrap.agree .popup-btn {
	margin-top:36px;
}

.floating-input-box > .floating-label { 
    position:absolute;
    top:30px;
    left:0;
	display:block;
	font-size:18px; line-height:40px;
	color:var(--color-gray, #aaa); 
    pointer-events:none;
    transition:all 0.2s;
}
.floating-input-box input {
    margin-top:30px;
}
.floating-input-box :is(input:focus,input:not(:placeholder-shown)) + .floating-label {
    position:absolute;
    top:0;
    left:0;
	color:var(--color-primary, #0148d4);
    font-size:15px;
    line-height:30px;
}
.floating-input-box input::placeholder { 
    color:transparent !important;
}

.agree-wrap {
	margin-top:60px;
}
.agree-wrap .all-select {
	margin-bottom:4px;
	padding-bottom:22px;
	width:100% !important;
	border-bottom:1px solid var(--color-light-gray, #ccc);
}
.agree-wrap .all-select label {
	font-weight:500;
	font-size:22px;
	letter-spacing:-1px;
}
.agree-wrap .checkbox-wrap {
	display:inline-block;
	width:calc(100% - 70px);
	vertical-align:middle;
}
.agree-wrap a {
	display:inline-block;
	width:70px;
	background:url('/html/images/sub/mypage/arrow_g.png') no-repeat right center;
	font-size:14px;
	color:var(--color-gray, #aaa);
	vertical-align:middle;
}

@media only screen and (max-width:1920px) {
	.login-wrap .login-inner {
		margin-left:640px;
	}
}
@media only screen and (max-width:1300px) {
	.login-wrap .login-inner {
		margin-left:550px;
	}
}
@media only screen and (max-width:1200px) {
	.login-wrap {
		background:none !important;
	}	
	.login-wrap .login-inner {
		margin-left:auto;
	}
}
@media only screen and (min-width:1025px) {
	.login-wrap #header {
		display:none;
	}
}
@media only screen and (max-width:1024px) {
	.login-wrap #header {
		display:block;
	}
	.login-wrap .logo {
		display:none;
	}
}
@media only screen and (max-width:860px) {
	.login-wrap .login-inner {
		padding:0 30px;
		padding-bottom:70px;
	}
    .login-wrap .login-title {
        margin-top:40px;
    }
	.sub-title {
        margin-top:40px;
	}
}
@media only screen and (max-width:768px) {
	.login-wrap .login-inner {
		padding:0 20px;
		padding-bottom:50px;
		width:100%;
	}
}
@media only screen and (max-width:767px) {
	.sub-title {
        margin-top:20px;
		font-size:18px;
	}

	.login-wrap .login-title {
        margin-top:20px;
		font-size:18px;
	}
	.login-wrap .sub-tit {
		margin-top:40px; margin-bottom:-20px;
	}

	.login-wrap .login-form {
		margin-top:30px;
	}
	.login-wrap .login-btn {
		margin:20px 0 10px;
	}
	.login-wrap .login-btn button {
		height:50px;
		font-size:16px;
	}

	.login-wrap .find-wrap li {
		padding:0 8px;
	}
	.login-wrap .find-wrap li:before {
		margin-top:-5px;
		height:10px;
	}
	.login-wrap .find-wrap li a {
		font-size:14px;
	}

	.login-wrap .sns-login-wrap {
		margin-top:30px; padding-top:30px;
	}
	.login-wrap .sns-login-wrap h1 {
		font-size:14px;
	}
	.login-wrap .sns-login {
		margin:25px 0;
	}
	.login-wrap .sns-login li {
		margin:0 10px;
	}
	.login-wrap .sns-login li a {
		width:45px; height:45px;
	}
	.login-wrap .sns-login li.naver a { 
		background-size:auto 12px;
	}
	.login-wrap .sns-login li:is(.kakao,.facebook,.google) a { 
		background-size:auto 15px;
	}

	.login-wrap .join-info {
		font-size:14px; line-height:50px;
	}

	.login-wrap .find-result {
		margin-top:5px;
	}
	.login-wrap .find-result .find-info {
		font-size:15px;
	}
	.login-wrap .find-result .find-result-txt {
		margin:25px 0; padding:40px 10px;
	}
	.login-wrap .find-result .find-result-txt p {
		font-size:16px;
	}
	.login-wrap .find-result .find-txt {
		margin-top:-10px;
	}
	.login-wrap .find-result .find-txt li {
		font-size:13px;
	}

	.login-form li input {
		height:35px;
		font-size:15px;
	}
	.login-form li input.in-button {
		padding-right:36px;
    }
	.login-form li .btn-del {
		padding:8px;
		height:35px;
	}
	.login-form li .btn-del img {
		height:19px;
	}
	.login-form li.no-label {
		margin-top:20px;
	}
    /* .login-form li select {
		padding:0 10px;
		height:40px;
		font-size:15px;
	} */
	.login-form li.email input {
		height:40px;
	}
	.login-form li.email span {
		font-size:15px; line-height:40px;
	}
	.login-form li.address :is(input:nth-of-type(1),input:nth-of-type(2)) {
		height:35px;
	}
	.login-form li.tel {
		margin-top:25px;
	}
	.login-form li.tel input ,
	.login-form li.address input:nth-of-type(1) {
		width:calc(100% - 110px);
	}
	.login-form li.address input:nth-of-type(2) {
		margin:7px 0;
	}
	.login-form li :is(.checkbox-wrap,.radio-wrap) li label {
		line-height:18px;
	}
    .login-form li [class^="btn"] {
		width:100px;
	}
	.login-form li textarea {
		font-size:15px;
	}
	.login-wrap .login-form li input {
		font-size:14px;
	}
    .login-wrap .login-form li > label {
		font-size:13px;
	}
	.mypage-modify-wrap .login-form li label {
		font-size:12px; line-height:24px;
	}

	.popup-wrap.agree .agree-popup-conts {
		margin-top:20px;
		padding:12px 15px;
	}
	.popup-wrap.agree .agree-popup-conts p {
		font-size:12px; line-height:18px;
	}
	.popup-wrap.agree .popup-btn {
		margin-top:20px;
	}

    .floating-input-box > .floating-label {
        font-size:14px;
        line-height:35px;
    }
    .floating-input-box :is(input:focus,input:not(:placeholder-shown)) + .floating-label {
        font-size:13px;
    }

    .agree-wrap {
		margin-top:30px;
	}
	.agree-wrap .all-select {
		padding-bottom:16px;
	}
	.agree-wrap .all-select label {
		font-size:17px;
	}
	.agree-wrap li {
		margin:10px 0;
	}

}

/* 서브 비주얼
------------------------------------------------------ */
.sub-visual {
	display:table;
	width:100%; height:200px;
	text-align:center;
	table-layout:fixed;
}
.sub-visual.company {
	background:url('/html/images/sub/visual/sub_visual01.jpg') no-repeat center center;
	background-size:cover;
}
.sub-visual.lecture {
	background:url('/html/images/sub/visual/sub_visual02.jpg') no-repeat center center;
	background-size:cover;
}
.sub-visual.teacher {
	background:url('/html/images/sub/visual/sub_visual03.jpg') no-repeat center center;
	background-size:cover;
}
.sub-visual.shop {
	background:url('/html/images/sub/visual/sub_visual04.jpg') no-repeat center center;
	background-size:cover;
}
.sub-visual.learning {
	background:url('/html/images/sub/visual/sub_visual05.jpg') no-repeat center center;
	background-size:cover;
}
.sub-visual .sub-visual-inner {
	display:table-cell;
	vertical-align:middle;
	background:rgba(1,72,212,0.9);
}
.sub-visual-wrap {width:100%; height:200px;}
.sub-visual-wrap .visual-inner {display:flex; align-items:center; justify-content:center; max-width:1920px; width:100%; height:100%; margin:auto; background-position:center; background-repeat:no-repeat; background-size:cover;}
.sub-visual-wrap .visual-inner h1 {font-weight:700; font-size:28px; color:#fff; text-shadow:5px 0 10px rgba(0,0,0,.1);}

.sub-visual .sub-visual-inner h1 {
	font-weight:700; font-size:28px;
	color:#fff;
	text-shadow:5px 0 10px rgba(0,0,0,.1);
}
@media only screen and (max-width:1024px) {
	.sub-visual {
		display:none;
	}
    .sub-visual-wrap {display:none;}
}
@media only screen and (max-width:768px) {
	.sub-visual {
		height:300px;
	}
	.sub-visual .sub-visual-inner h1 {
		font-size:24px;
	}
}
@media only screen and (max-width:640px) {
	.sub-visual {
		height:200px;
	}
	.sub-visual .sub-visual-inner h1 {
		font-size:20px;
	}
}

/* 콘텐츠 레이아웃
------------------------------------------------------ */
.sub-conts-wrap {
	padding:60px 0 150px;
}

@media only screen and (max-width:768px) {
	.sub-conts-wrap {
		padding:50px 0 100px;
	}
}
@media only screen and (max-width:640px) {
	.sub-conts-wrap {
		padding:40px 0 70px;
	}
}

/* -------- sub-conts-tit -------- */
.sub-conts-wrap .sub-conts-tit {
	margin-bottom:7px;
	font-weight:700; font-size:28px;
	color:var(--color-dark-gray, #333);
}

@media only screen and (max-width:1024px) {
	.sub-conts-wrap .sub-conts-tit {
		margin-bottom:30px;
	}
}
@media only screen and (max-width:768px) {
	.sub-conts-wrap .sub-conts-tit {
		margin-bottom:20px;
		font-size:24px;
	}
}
@media only screen and (max-width:640px) {
	.sub-conts-wrap .sub-conts-tit {
		font-size:20px;
	}
}

/* -------- location-menu -------- */
.location-menu {
	margin-bottom:40px;
	/* font-size:0; */
    display:flex;
}
.location-menu li {
	display:inline-block;
	vertical-align:middle;
}
.location-menu li:after {
	content:'';
	display:inline-block;
	margin:0 10px;
	width:7px; height:10px;
	background:url('/html/images/sub/common/location_arrow.png') no-repeat center center;
	vertical-align:middle;
}
.location-menu li:last-child:after {
	display:none;
}
.location-menu li a {
	display:inline-block;
	font-size:16px;
	color:#666;
	vertical-align:middle;
}

@media only screen and (max-width:1024px) {
	.location-menu {
		display:none;
	}
}
@media only screen and (max-width:768px) {
	.location-menu {
		margin-bottom:30px;
	}
	.location-menu li:after {
		top:-1px;
		margin:0 8px;
	}
	.location-menu li a {
		font-size:15px;
	}
}
@media only screen and (max-width:640px) {
	.location-menu {
		margin-bottom:20px;
	}
	.location-menu li:after {
		margin:0 6px;
		background-size:auto 8px;
	}
	.location-menu li a {
		font-size:13px;
	}
}

/* -------- sub-tab-menu -------- */
.sub-tab-menu {
	margin-bottom:50px;
	border-bottom:2px solid #eee;
	/* font-size:0; */
}
.sub-tab-menu .swiper-slide {
	display:inline-block;
	margin-right:40px;
	width:auto;
	vertical-align:top;
}
.sub-tab-menu .swiper-slide:last-child {
	margin-right:0;
}
.sub-tab-menu .swiper-slide a {
	position:relative;
	display:block;
	font-size:20px; line-height:40px;
	color:var(--color-dark-gray, #333);
}
.sub-tab-menu .swiper-slide.on a {
	font-weight:700;
}
.sub-tab-menu .swiper-slide.on a:after {
	content:'';
	position:absolute; bottom:-2px; left:0;
	width:100%; height:4px;
	background:var(--color-primary, #0148d4);
}

@media only screen and (max-width:1180px) {
    .sub-tab-menu {
        width:calc(100% + 30px);
        overflow:hidden;
    }
}
@media only screen and (max-width:768px) {
	.sub-tab-menu {
		margin-bottom:40px;
        width:calc(100% + 20px);
	}
	.sub-tab-menu .swiper-slide {
		margin-right:35px;
	}
	.sub-tab-menu .swiper-slide a {
		font-size:18px; line-height:36px;
	}
}

@media only screen and (max-width:640px) {
	.sub-tab-menu {
		margin-bottom:25px;
	}
	.sub-tab-menu .swiper-slide {
		margin-right:25px;
	}
	.sub-tab-menu .swiper-slide a {
		font-size:15px; line-height:32px;
	}
	.sub-tab-menu .swiper-slide:is(.on,.swiper-slide-active) a:after {
		height:3px;
	}
}



/* 개별페이지
------------------------------------------------------ */
/* -------- 교육원소개 -------- */
.intro-wrap {
	text-align:center;
}
.intro-wrap .intro-visual {
	width:100%; /*height:280px;*/
	/* background:url('/html/images/sub/company/intro_visual.jpg') no-repeat center center; */
	background-size:cover;
}
.intro-wrap .intro-visual img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.intro-wrap .intro-tit {
	margin:75px 0 70px;
	font-size:32px;
	color:var(--color-dark-gray, #333);
    font-weight:400;
	letter-spacing:-1px;
	text-align:center;
	word-break:keep-all;
    line-height:1.33em;
}
.intro-wrap .intro-tit strong {
	font-weight:700;
}
.intro-wrap .intro-tit span {
	display:block;
	font-size:24px;
}
/* history */
.history-wrap {
	position:relative;
	display:inline-block;
	width:auto;
	text-align:left;
}
.history-wrap:before {
	content:'';
	position:absolute; top:10px; left:157px;
	width:1px; height:calc(100% - 20px);
	background:#ddd;
}
.history-wrap .history-box {
	margin:45px 0;
	font-size:0;
}
.history-wrap .history-box:first-child {
	margin-top:0;
}
.history-wrap .history-box:last-child {
	margin-bottom:0;
}
.history-wrap .history-box > h1 {
	display:inline-block;
	padding-right:90px;
	width:157px;
	font-size:28px; line-height:1;
	color:var(--color-dark-gray, #333);
	vertical-align:top;
}
.history-wrap .history-box > ul {
	position:relative;
	display:inline-block;
	padding-left:90px;
	width:calc(100% - 157px);
	vertical-align:top;
}
.history-wrap .history-box > ul:before {
	content:'';
	position:absolute; top:7px; left:0;
	margin-left:-6px;
	width:13px; height:13px;
	border-radius:50%;
	background:var(--color-primary, #0148d4);
}
.history-wrap .history-box > ul li {
	margin-bottom:10px; padding-left:30px;
	font-size:18px;
	color:var(--color-dark-gray, #333);
	text-indent:-30px;
	word-break:keep-all;
}
.history-wrap .history-box > ul li:last-child {
	margin-bottom:0;
}
.history-wrap .history-box > ul li span {
	display:inline-block;
	width:45px;
	text-indent:0;
}

/* history2 */
.history-zigzag-wrap .history-box {
  position: relative;
  display: block;
  width: 50%;
  padding-bottom: 40px; }
.history-zigzag-wrap .history-box:nth-child(odd) {
    margin: 0 auto 0 0;
    padding-right: 50px; }
.history-zigzag-wrap .history-box:nth-child(even) {
    display: block;
    margin: 0 0 0 auto;
    padding-left: 50px; }
.history-zigzag-wrap .history-box:last-child {
    padding-bottom: 0; }
.history-zigzag-wrap .history-box:before {
    content: "";
    position: absolute;
    top: 0;
    right: -.5px;
    bottom: 0;
    width: 1px;
    background-color: #bdbdbd;
    z-index: 1; }
.history-zigzag-wrap .history-box:nth-child(even):before {
    right: auto;
    left: -.5px; }
.history-zigzag-wrap .history-box:first-child:before {
    top: 10px; }
.history-zigzag-wrap .history-box:last-child:before {
    bottom: auto;
    height: 10px; }

.history-zigzag-wrap .history-tit {
  position: relative;
  font-size: 28px;
  font-weight: 500;
  color: var(--color-dark-gray, #333);
  text-align: right;
  line-height: 1;
  margin-bottom: 15px; }
.history-zigzag-wrap .history-tit:after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    background-color: var(--color-primary, #0148d4);
    border-radius: 50%;
    top: 8px;
    right: -55px;
    z-index: 2;
    box-sizing: content-box; }

.history-zigzag-wrap .history-box:nth-child(even) .history-tit {
  text-align: left; }
.history-zigzag-wrap .history-box:nth-child(even) .history-tit:before {
    right: auto;
    left: -30.5px; }
.history-zigzag-wrap .history-box:nth-child(even) .history-tit:after {
    right: auto;
    left: -55px; }

.history-zigzag-wrap .history-box .offset-md-6 {
  text-align: right;
  word-break: keep-all;
  margin-left: 0; }

.history-zigzag-wrap .history-box:nth-child(even) .offset-md-6 {
  text-align: left; }

.history-zigzag-wrap .history-box dl {
  margin-top: 10px; }

.history-zigzag-wrap .history-box dt {
  display: none; }

.history-zigzag-wrap .history-box dd {
  position: relative;
  display: inline-block;
  font-size: 18px;
  color: #333132;
  padding-left: 35px; }
.history-zigzag-wrap .history-box dd span {
    position: absolute;
    top: 0;
    left: 0;
    color: #555; }

.history_inner_img {
  width: 220px; }

@media (max-width: 767px) {
    
.history-zigzag-wrap {
    margin-left:10px;
}
.history-zigzag-wrap .history-box {
    width: 100%;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left:20px !important; }
.history-zigzag-wrap .history-box:before {
    right:auto;
    left:0;
   }
.history-zigzag-wrap .history-box dl {
      margin-top: 10px; }
.history-zigzag-wrap .history-tit {
    text-align: left;
    font-size: 20px; }
.history-zigzag-wrap .history-box:nth-child(even) .history-tit:after,
.history-zigzag-wrap .history-tit:before, 
.history-zigzag-wrap .history-tit:after {
    right:auto;
    left:-25px;
    top:5px;
  }
.history-zigzag-wrap .history-box .offset-md-6 {
    text-align: left; }
.history-zigzag-wrap .history-box dd {
    font-size: 15px; } }


/*서비스 소개*/
.service-intro .intro-tit {
    font-size:40px;
    line-height:1.25em;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:100px;
}
.service-intro .intro-tit strong {
    color:var(--color-primary, #0148d4);
}
.service-intro .intro-tit .txt {
    margin-top:35px; font-size:24px;
    line-height:1.333em;
    max-width:534px;
}
.service-intro .intro-img {margin-top:90px;}
.intro-img img {max-width:100%;}
.intro-list {    
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    width:100%;
    max-width:1180px;
    margin:auto;
    gap:20px;
}
.intro-list li {
    border:1px solid #eee;
    border-radius:9px;
    padding:15px 40px;
    min-height:298px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.intro-list .list-title {
    margin-top:36px;
    font-size:24px;
    color:var(--color-dark-gray, #333);
}
.intro-list .list-text {
    margin-top:24px;
    font-size:18px;
    color:var(--color-dark-gray, #333);
    line-height:1.66em;
}

@media only screen and (max-width:768px) {
	.intro-wrap .intro-visual {
		/* height:240px; */
        aspect-ratio:5/1.5;
	}
	.intro-wrap .intro-tit {
		margin:40px 0;
		font-size:24px;
	}
	.intro-wrap .intro-tit span {
		margin-top:3px;
		padding:0 20px;
		font-size:18px; line-height:1.4em;
	}

	.history-wrap {
		margin-left:10px;
		width:calc(100% - 10px);
	}
	.history-wrap:before {
		left:0;
	}
	.history-wrap .history-box {
		position:relative;
		margin:35px 0;
		padding-left:20px;
	}
	.history-wrap .history-box:before {
		content:'';
		position:absolute; top:5px; left:0;
		margin-left:-5px;
		width:11px; height:11px;
		border-radius:50%;
		background:var(--color-primary, #0148d4);
	}
	.history-wrap .history-box > h1 {
		margin-bottom:16px;
		padding-right:0;
		width:100%;
		font-size:20px;
	}
	.history-wrap .history-box > ul {
		padding-left:0;
		width:100%;
	}
	.history-wrap .history-box > ul:before {
		display:none;
	}
	.history-wrap .history-box > ul li {
		margin-bottom:5px; padding-left:25px;
		font-size:15px;
		text-indent:-25px;
	}
	.history-wrap .history-box > ul li span {
		width:35px;
	}

    .service-intro .intro-tit {font-size:32px;}
    .service-intro .intro-tit .txt {
        margin-top:28px;
        font-size:20px; 
        line-height:1.4em;
    }
    .service-intro .intro-img {margin-top:50px;}
    .intro-list {
        grid-template-columns:repeat(1, 100%);
    }
    .intro-list li {padding:20px 35px; min-height:240px;}
    .intro-list .list-img {
        width:50px;
    }
    .intro-list img {
        width:100%;
    }
    .intro-list .list-title {
        margin-top:20px;
        font-size:20px;
    }
    .intro-list .list-text {
        margin-top:15px;
        font-size:16px;
    }
}
@media only screen and (max-width:640px) {
	.intro-wrap .intro-visual {
		/* height:160px; */
	}
}



/* -------- 찾아오시는길 -------- */
.location-wrap {}

/* map */
.location-wrap .location-map { 
	overflow:hidden;
	width:100%; height:400px;	 
}

/* address */
.location-wrap .address-info { 
	margin-top:80px;
	border-top:1px solid #ddd;
}
.location-wrap .address-info .address-box { 
	padding:13px 0;
	border-bottom:1px solid #ddd;
	/* font-size:0;	  */
    display:flex;
}
.location-wrap .address-info .address-box > * { 
	display:inline-block;
	font-size:18px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
	vertical-align:top;
}
.location-wrap .address-info .address-box h1 { 
	margin:13px 0;
	width:220px; 
	font-weight:700;
	text-align:center;
}
.location-wrap .address-info .address-box ul { 
	padding-left:10%;
	width:calc(100% - 220px);
	text-align:left;
}
.location-wrap .address-info .address-box ul li { 
	margin:13px 0;
}

@media only screen and (max-width:768px) {
	.location-wrap .location-map {
		height:300px;
	}
	.location-wrap .location-map iframe {
		height:300px !important;
	}
	.location-wrap .address-info {
		margin-top:40px;
	}
	.location-wrap .address-info .address-box {
		padding:10px 0;
	}
	.location-wrap .address-info .address-box h1 {
		display:block;
		margin:0;
		width:100%;
		text-align:left;
	}
	.location-wrap .address-info .address-box ul {
		padding:0;
		width:100%;
	}
	.location-wrap .address-info .address-box ul li {
		margin:3px 0;
	}
	.location-wrap .address-info .address-box > * {
		font-size:15px;
	}
}



/* 게시판
------------------------------------------------------ */
.board-search-wrap { 
}

/* -------- 검색 -------- */
.board-search-wrap { 
	overflow:hidden;
	position:relative;
	margin:0 auto 50px;
	width:100%; max-width:450px; height:48px;
	border-radius:15px;
	border:1px solid #ddd;
}
.board-search-wrap input { 
	padding-left:20px;
	width:calc(100% - 56px); height:48px;
	border:0 none;
	background:none;
	font-size:18px;
	color:var(--color-dark-gray, #333);
}
.board-search-wrap input::placeholder {
	color:var(--color-gray, #aaa);
}
.board-search-wrap button { 
	position:absolute; top:0; right:0;
	padding:0;
	width:56px; height:48px;
	background:none;
	border:0 none;
	/* font-size:0; */
}
.board-search-wrap button img { 
	display:block;
	margin:0 auto;
}

@media only screen and (max-width:640px) {
	.board-search-wrap {
		margin-bottom:30px;
		height:40px;
		border-radius:10px;
	}
	.board-search-wrap input {
		padding-left:12px;
		width:calc(100% - 42px); height:40px;
		font-size:15px;
	}
	.board-search-wrap button {
		width:42px; height:40px;
	}
}

/* -------- 게시판 버튼 -------- */
.board-btn-wrap { 
	margin-top:60px;
    font-size:0;
}
.board-btn-wrap .btn-utils { 
	position:relative; left:-11px;
	display:inline-block;
	width:calc(100% - 120px);
	vertical-align:top;
}
.board-btn-wrap .btn-utils li { 
	position:relative;
	display:inline-block;
	padding:0 11px;
	vertical-align:middle;
}
.board-btn-wrap .btn-utils li:after { 
	content:'';
	position:absolute; top:50%; right:0;
	margin-top:-7px;
	width:1px; height:14px;
	background:#ddd;
}
.board-btn-wrap .btn-utils li:last-child:after { 
	display:none; 
}
.board-btn-wrap .btn-utils li a { 
	display:block;
	font-weight:500; font-size:16px; line-height:40px;
	color:var(--color-gray, #aaa);
}
.board-btn-wrap .btn-utils li:hover a {
	text-decoration:underline;
}
.board-btn-wrap .btn-write { 
	display:inline-block;
	width:120px;
	vertical-align:top;
}
.board-btn-wrap .btn-write :is(a,button) { 
	width:100%;
}
.board-search-wrap + .board-btn-wrap {
	margin-top:0;
	margin-bottom:15px;
}

@media only screen and (max-width:640px) {
	.board-btn-wrap {
		margin-top:30px;
	}
	.board-btn-wrap .btn-utils {
		left:-8px;
		width:calc(100% - 80px);
	}
	.board-btn-wrap .btn-utils li {
		padding:0 7px;
	}
	.board-btn-wrap .btn-utils li:after {
		margin-top:-5px;
		height:10px;
	}
	.board-btn-wrap .btn-utils li a {
		font-size:13px; line-height:35px;
	}
	.board-btn-wrap .btn-write {
		width:80px;
	}
}


/* -------- board-paging -------- */
.board-paging { 
	margin-top:100px;
	/* font-size:0; */
	text-align:center;
}
.board-paging :is(ul,ol) {display:flex; justify-content:center;}
.board-paging li { 
	display:inline-block;
	width:31px; height:31px;
	vertical-align:top;
}
.board-paging .paging-num { 
	margin:0 3px;
	width:auto;	 
}
.board-paging .paging-num li { 
	margin:0 3px;
}
.board-paging .paging-num li.on { 
	border:1px solid #011fd4; 
}
.board-paging .paging-num li a { 
	display:block;
	font-weight:500; font-size:14px; line-height:29px;
	color:var(--color-dark-gray, #333);
}
.board-paging .paging-num li.on a { 
	color:#011fd4; 
}
.board-paging :is(.btn-first,.btn-prev,.btn-next,.btn-las) a { 
	display:block;
	width:100%; height:100%;
	border:1px solid var(--color-light-gray, #ccc);
	font-size:0;
}
.board-paging .btn-first a { 
    background:url('/html/images/sub/board/btn_first.png') no-repeat center center;
}
.board-paging .btn-prev a { 
    margin-left:5px;
	background:url('/html/images/sub/board/btn_prev.png') no-repeat center center; 
}
.board-paging .btn-next a {     
	background:url('/html/images/sub/board/btn_next.png') no-repeat center center; 
}
.board-paging .btn-last a { 
    margin-left:5px;
	background:url('/html/images/sub/board/btn_last.png') no-repeat center center; 
}

@media only screen and (max-width:768px) {
	.board-paging {
		margin-top:70px;
	}
}

@media only screen and (max-width:640px) {
	.board-paging {
		margin-top:40px;
	}
}



/* 강의소개
------------------------------------------------------ */
/* -------- 강의리스트 -------- */
.lecture-list { 
    display:flex; flex-wrap:wrap;
	position:relative;
	/* font-size:0; */

    width:100%;
    gap:40px 4%;
    left:0;
    margin-bottom:0;
}
.lecture-list .lecture-box { 
	display:flex; flex-direction:column;
	vertical-align:top;

    width:30.666%;
    padding:0;
    /* margin-bottom:40px; */
}
.lecture-box .thumb { 
	overflow:hidden;
	border-radius:4px; 
}
.lecture-box .thumb a { 
	display:block; 
    aspect-ratio:1.8/1.01;
}
.lecture-box .thumb img { 
	width:100%;
    height:100%;
    object-fit:cover;
	vertical-align:top;
}
.lecture-box .lecture-detail {
    flex-grow:1; 
	position:relative;
	border-radius:0 0 4px 4px;
	background:#fff;
	transition:.3s;
    display:flex;
    flex-direction:column;
}
.lecture-box:hover .lecture-detail { 
	box-shadow:0 0 15px rgba(0,0,0,.15);
}
.lecture-box .lecture-detail>a {
    display:flex;
    flex-direction:column;
    height:100%;
    padding:30px 10px 10px;
}
.lecture-box .lecture-label { 
	position:absolute; top:-15px; left:10px;
	z-index:111;
	display:flex;
}
.lecture-box .lecture-label li { 
	display:inline-block;
	margin-right:4px; padding:0 13px;
	border-radius:4px;
	background:#0098e0;
	font-weight:700; font-size:14px; line-height:30px;
	color:#fff;
	vertical-align:top;
}
.lecture-box .lecture-label li:first-child { 
	background:var(--color-primary, #0148d4); 
}
.lecture-box .lecture-info { 
	margin-bottom:15px;
}
.lecture-box .lecture-info .cate { 
	margin-bottom:3px;
	font-size:14px;
	color:var(--color-gray, #aaa);
}
.lecture-box .lecture-info .name { 
	font-size:15px;
	color:var(--color-dark-gray, #333);
}
.lecture-box .lecture-info .subject { 
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
	letter-spacing:-1px;
	word-break:keep-all;
}
.lecture-box .lecture-info .date { 
	font-size:15px;
	color:var(--color-dark-gray, #333);
}
.lecture-box .price-wrap { 
	margin-top:auto; 
}
.lecture-box .price-wrap .discount { 
	font-size:16px; 
}
.lecture-box .price-wrap .discount em { 
	margin-right:3px;
	font-style:normal; font-weight:500;
	color:var(--color-red, #dc3545);
}
.lecture-box .price-wrap .discount span { 
	color:var(--color-gray, #aaa);
	text-decoration:line-through;
}
.lecture-box .price-wrap .price { 
	font-weight:500; font-size:16px;
	color:var(--color-dark-gray, #333);
}
.lecture-box .price-wrap .price strong { 
	font-weight:500; font-size:24px; 
}

@media only screen and (max-width:1024px) {
	.lecture-list {
        left:0;
        width:100%;
        column-gap:20px;
	}
	.lecture-list .lecture-box {
        width:calc((100% - 40px) / 3);
        padding:0;
	}
}
@media only screen and (max-width:950px) {
	.lecture-list {
        left:0;
        column-gap:30px;
        width:100%;
	}
	.lecture-list .lecture-box {
        padding:0;
        width:calc(50% - 15px);
	}
}
@media only screen and (max-width:640px) {
	.lecture-list {
        margin-bottom:0;
        row-gap:20px;
	}
	.lecture-list .lecture-box {
        width:100%;
        margin-bottom:0;
	}
	.lecture-box .lecture-label {
		top:-13px;
	}
	.lecture-box .lecture-detail>a {
		padding:22px 5px 5px;
	}
	.lecture-box .lecture-label li {
		padding:0 10px;
		font-size:12px; line-height:26px;
	}
	.lecture-box .lecture-info .cate {
		font-size:12px;
	}
	.lecture-box .lecture-info .name {
		font-size:13px;
	}
	.lecture-box .lecture-info .subject {
		margin:3px 0;
		font-size:16px;
	}
	.lecture-box .lecture-info .date {
		font-size:13px;
	}
	.lecture-box .price-wrap {
		margin-top:5px;
	}
	.lecture-box .price-wrap .discount {
		font-size:14px;
	}
	.lecture-box .price-wrap .price {
		font-size:14px;
	}
	.lecture-box .price-wrap .price strong {
		font-size:20px; line-height:1;
	}
}


/* -------- 강의리스트 -------- */
.lecture-view { 
	position:relative;
	/* font-size:0;	  */
}

/* conts */
.lecture-conts-wrap { 
	display:inline-block;
	width:calc(100% - 400px);
	vertical-align:top;
}
.lecture-conts-wrap .lecture-tit { 
	margin-bottom:20px;
	font-weight:700; font-size:32px;
	color:var(--color-dark-gray, #333);
}
.lecture-conts-wrap .video-wrap {
  position:relative;
  padding-top:56%;
  width:100%; height:auto;
}
.lecture-conts-wrap .video-wrap :where(iframe,img) {
  position:absolute;
  top:0; left:0;
  z-index:1;
  width:100%; height:100%;
}

@media only screen and (max-width:767px) {
	.lecture-conts-wrap .lecture-tit {
		margin-bottom:10px;
		font-size:22px;
	}
}


.lecture-conts-tab { 
	border-bottom:1px solid #eee;
	/* font-size:0; */
    display:flex;
    flex-wrap:wrap;
}
.lecture-conts-tab li { 
	position:relative;
	display:inline-block;
	margin-left:40px;
	width:auto;
	vertical-align:top;
}
.lecture-conts-tab li:first-child { 
	margin-left:0; 
}
.lecture-conts-tab li.on:after { 
	content:'';
	position:absolute; bottom:-1px; left:0;
	width:100%; height:1px;
	background:var(--color-primary, #0148d4);
}
.lecture-conts-tab li a { 
	display:block;
	font-size:18px; line-height:37px;
	color:var(--color-dark-gray, #333);
}
.lecture-conts-tab li.on a { 
	font-weight:500;
	color:var(--color-primary, #0148d4);
}

.lecture-conts-box { 
    padding-top:50px;
    font-size:initial;
}
.lecture-conts-box .lecture-conts {
    padding-top:60px;
}
.lecture-conts-box .lecture-conts .lecture-conts-tit { 
	margin:60px 0 25px;
	font-weight:700; font-size:24px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
	position:relative;
	z-index:2;
}
.lecture-conts-box .lecture-conts .lecture-conts-tit span {
	display:block;
	font-weight:500; font-size:16px;
	color:var(--color-primary, #0148d4);
}
.lecture-conts-box .lecture-conts .lecture-conts-tit:first-child {
	margin-top:0;
}

.fixedTab.fixed {
    position:fixed;
    width:1180px;
    left:50%;
    top:69px;
    z-index:3;
	transform:translateX(-50%);
}
.fixedTab.fixed .lecture-conts-tab {
    width:calc(100% - 400px);
    position:relative;
    /* margin:auto; */
    padding-top:15px;
    background:#fff;
}
.fixedTab.fixed .lecture-conts-tab li a {
	padding:5px 0;
}

.lecture-view .lecture-cart.fixed {
    top:20px;
}

@media only screen and (max-width:1180px) {
    .fixedTab.fixed {
        left:0;
        transform:none;
		width:100%;
    }
	.fixedTab.fixed .lecture-conts-tab {
    	width:calc(100% - 430px);
		padding-left:30px;
	}
}
@media only screen and (max-width:1024px) {
	.lecture-conts-wrap {
		width:100%;
	}
    .lecture-view .lecture-cart.fixed {top:auto;}
	.fixedTab.fixed .lecture-conts-tab {
		width:100%;
	}
}
@media only screen and (max-width:767px) {
	.lecture-conts-box .lecture-conts .lecture-conts-tit {
		margin:40px 0 15px;
		font-size:18px;
	}
	.lecture-conts-tab li {
		margin-left:25px;
	} 
	.lecture-conts-tab li a {
		font-size:14px; line-height:30px;
	}
    .lecture-conts-box .lecture-conts { padding-top:40px; }

    .fixedTab.fixed {top:126px;}
    .fixedTab.fixed .lecture-conts-tab {
        left:0;
        transform:none;
        width:100%;
        padding:5px 10px 0;
    }
}

/* class */
.lecture-conts-box .class-compose {
	font-size:0;
}
.lecture-conts-box .class-compose :is(dt,dd) {
	display:inline-block;
	margin:3px 0;
	font-weight:400; font-size:16px;
	word-break:keep-all;
	vertical-align:top;
}
.lecture-conts-box .class-compose dt {
	width:105px;
	color:var(--color-gray, #aaa);
}
.lecture-conts-box .class-compose dd {
	width:calc(100% - 105px);
	color:var(--color-dark-gray, #333);
}

@media only screen and (max-width:767px) {
	.lecture-conts-box .class-compose :is(dt,dd) {
		font-size:14px;
	}
	.lecture-conts-box .class-compose dt {
		width:80px;
	}
	.lecture-conts-box .class-compose dd {
		width:calc(100% - 80px);
	}
}

.lecture-conts-box .class-movie {
	overflow:hidden;
	width:100%;
	border-radius:4px;
    font-size:16px;
}
.lecture-conts-box .class-movie a {
	display:block;
	font-size:0;
}
.lecture-conts-box .class-movie img {
	width:100%;
}

.lecture-conts-box .class-conts-box {
	padding:20px 0;
	border-bottom:1px solid #eee;
}
.lecture-conts-box .class-conts .thumb {
	overflow:hidden;
	display:inline-block;
	width:260px;
	border-radius:6px;
	vertical-align:top;
}
.lecture-conts-box .class-conts .thumb img {
	width:100%;
}
.lecture-conts-box .class-conts .class-info {
	display:inline-block;
	padding-left:20px;
	width:calc(100% - 260px);
	vertical-align:top;
}
.lecture-conts-box .class-conts .class-info h1 {
	margin-bottom:20px;
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.lecture-conts-box .class-conts .class-info h1 span {
	display:block;
	font-weight:500; font-size:16px;
	color:var(--color-primary, #0148d4);
}
.lecture-conts-box .class-conts .class-info li {
	position:relative;
	margin:2px 0; padding-left:8px;
	font-size:16px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.lecture-conts-box .class-conts .class-info li:before {
	content:'';
	position:absolute; top:9px; left:0;
	width:5px; height:5px;
	border-radius:50%;
	background:var(--color-dark-gray, #333);
}

@media only screen and (max-width:767px) {
	.lecture-conts-box .class-conts-box {
		padding:10px 0;
	}
	.lecture-conts-box .class-conts .thumb {
		width:130px;
	}
	.lecture-conts-box .class-conts .class-info {
		padding-left:10px;
		width:calc(100% - 130px);
	}
	.lecture-conts-box .class-conts .class-info h1 {
		margin-bottom:5px;
		font-size:14px;
	}
	.lecture-conts-box .class-conts .class-info h1 span {
		font-size:13px;
	}
	.lecture-conts-box .class-conts .class-info li {
		padding-left:6px;
		font-size:11px;
	}
	.lecture-conts-box .class-conts .class-info li:before {
		top:7px;
		width:3px; height:3px;
	}
    
    .lecture-conts-box .class-movie { font-size:14px;}
}


/* curriculum */
.lecture-conts-box .class-curriculum {
}
.lecture-conts-box .class-curriculum-index {
	position:relative;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
/* .lecture-conts-box .class-curriculum-index:after {
	content:'';
	position:absolute;
	top:0;
	right:0;
	width:260px;
    height:160px;
	z-index:1;
} */
/* .lecture-conts-box .class-curriculum-index:nth-of-type(1):after {
	background:url('/html/images/sub/lecture/curriculum_bg01.png') no-repeat right top;
}
.lecture-conts-box .class-curriculum-index:nth-of-type(2):after {
	background:url('/html/images/sub/lecture/curriculum_bg02.png') no-repeat right top;
} */
.lecture-conts-box .class-curriculum .lecture-conts-tit + p {
	margin-top:40px;
	font-size:16px;
	color:var(--color-dark-gray, #333);
}
.lecture-conts-box .class-curriculum ul + .class-curriculum-index {
	margin-top:60px;
}
.lecture-conts-box .class-curriculum ul {
	margin-top:30px;
	border-top:1px solid #eee;
	/* font-size:0; */
	position:relative;
	z-index:2;
}
.lecture-conts-box .class-curriculum ul li {
	padding:16px 0 17px;
	border-bottom:1px solid #eee;
	font-size:18px;
	color:var(--color-dark-gray, #333);
}
.lecture-conts-box .class-curriculum ul li > * {
	display:inline-block;
	vertical-align:middle;
}
.lecture-conts-box .class-curriculum ul li .time {
	margin-left:30px;
	font-weight:300; font-size:14px; line-height:15px;
	color:var(--color-gray, #aaa);
}
.lecture-conts-box .class-curriculum ul li .time img {
	display:inline-block;
	margin-right:5px;
	vertical-align:middle;
}
.lecture-conts-box .class-curriculum ul li strong {
	margin-left:20px; padding:0 10px;
	border-radius:13px;
	border:1px solid var(--color-primary, #0148d4);
	font-weight:400; font-size:14px; line-height:23px;
	color:var(--color-primary, #0148d4);
    display:inline-block;
}
.lecture-conts-box .class-curriculum .image-box {max-width:300px; aspect-ratio:3/2;}
.lecture-conts-box .class-curriculum .image-box img {width:100%; height:100%; object-fit:contain;}

@media only screen and (max-width:767px) {
	.lecture-conts-box .class-curriculum .lecture-conts-tit {
		/* width:50%; */
	}
	.lecture-conts-box .class-curriculum .lecture-conts-tit + p {
		margin-top:20px;
		font-size:14px;
	}
	.lecture-conts-box .class-curriculum ul + .class-curriculum-index {
		margin-top:30px;
	}
	/* .lecture-conts-box .class-curriculum-index:nth-of-type(1):after,
    .lecture-conts-box .class-curriculum-index:nth-of-type(2):after {
		background-size:36vw auto;
	} */
	.lecture-conts-box .class-curriculum ul {
		margin-top:40px;
	}
	.lecture-conts-box .class-curriculum ul li {
		padding:10px 0 11px;
		font-size:15px;
	}
	.lecture-conts-box .class-curriculum ul li .time {
		margin-left:15px;
		font-size:12px; line-height:13px;
	}
	.lecture-conts-box .class-curriculum ul li .time img {
		position:relative; top:-1px;
		margin-right:3px;
		height:12px;
	}
	.lecture-conts-box .class-curriculum ul li strong {
		margin-left:10px;
		padding:0 7px;
		font-size:12px; line-height:18px;
	}
    .lecture-conts-box .class-curriculum .image-box {margin-top:15px; max-width:100%; width:100%;}
}


/* review */
.lecture-review-wrap { 
	 
}
.lecture-review-box { 
	margin-bottom:43px;
	padding-bottom:40px;
	border-radius:10px;
	background:#fff;
	box-shadow:2px 0 10px rgba(0,0,0,.15);
}
.lecture-review-box a { 
	display:block; 
	padding:40px 40px 0 40px;
}

.lecture-review-box ul { 
	padding-left:50px;
	background:url('/html/images/common/login_icon.png') no-repeat left center;
}
.lecture-review-box ul li { 
	display:block;
	font-size:0;
}
.lecture-review-box .grade { 
	margin-bottom:4px; 
}
.lecture-review-box .grade .grade-wrap { 
	display:inline-block; 
	width:96px; height:16px;
	background:url('/html/images/sub/board/grade.png') no-repeat left center;
	text-align:left;
	vertical-align:middle;
}
.lecture-review-box .grade .grade-wrap span { 
	display:inline-block; 
	height:16px;
	background:url('/html/images/sub/board/grade_on.png') no-repeat left center;
	vertical-align:top;
}
.lecture-review-box ul .name {  
	display:inline-block;
	margin-right:20px;
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
	vertical-align:middle;
}
.lecture-review-box ul .date { 
	display:inline-block;
	font-weight:300; font-size:16px;
	color:var(--color-gray, #aaa);
	vertical-align:middle;
}
.lecture-review-box .subject { 
	overflow:hidden;
	display:block; 
	margin:37px 0 17px;
	width:100%;
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
	white-space:nowrap;
	text-overflow:ellipsis;
}
.lecture-review-box .conts { 
	overflow:hidden;
	display:block;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:4;
	-webkit-box-orient:vertical;
	height:88px;
	font-size:15px; line-height:22px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.lecture-review-box .reply-cont {
	margin:20px 40px 0;
	padding-top:20px;
    border-top: 1px solid #eee;
}
.lecture-review-box .reply-cont .conts {
	height:auto;
	-webkit-line-clamp:unset;
	text-overflow: clip;
}

.lecture-review-wrap + [class^="btn"] { 
	display:block;
	margin-top:60px;
}
@media only screen and (max-width:767px) {
	.lecture-review-box {
		margin-bottom:20px;
		padding-bottom:20px;
	}
	.lecture-review-box a {
		padding:20px 20px 0 20px;
	}
	.lecture-review-box ul {
		padding-left:45px;
		background-size:auto 35px;
	}
	.lecture-review-box .grade .grade-wrap {
		width:72px; height:12px;
		background-size:auto 100%;
	}
	.lecture-review-box .grade .grade-wrap span {
		height:12px;
		background-size:auto 100%;
	}
	.lecture-review-box ul .name {
		margin-right:10px;
		font-size:15px;
	}
	.lecture-review-box ul .date {
		font-size:13px;
	}
	.lecture-review-box .subject {
		margin:17px 0 7px;
		font-size:15px;
	}
	.lecture-review-box .conts {
		height:72px;
		font-size:13px; line-height:18px;
	}
	.lecture-review-box .reply-cont {
		margin:15px 20px 0;
		padding-top:15px;
	}
	.lecture-review-wrap + [class^="btn"] {
		margin-top:30px;
	}
}



/* teacher */
.lecture-teacher-list { 
	position:relative;
    /* display:flex;
    flex-wrap:wrap; */
    display:grid;
	gap:70px 30px;
    grid-template-columns:repeat(auto-fill, minmax(225px, 1fr));
}
/* .lecture-teacher-list li { 
    width:calc((100% - 60px) / 3);
}
.lecture-teacher-list li a { 
	display:block; 
}
.lecture-teacher-list li .photo { 
	overflow:hidden;
	border-radius:10px;
	border:1px solid #eee;
	background:#f5f5f7;
    aspect-ratio:1/1;
}
.lecture-teacher-list li .photo img { 
	width:100%; 
    height:100%;
    object-fit:cover;
} */
.lecture-teacher-list li .teacher-photo {
	border-radius:10px;
}
.lecture-teacher-list li .teacher-name { 
	margin-top:5px;
	text-align:left;
}

@media only screen and (max-width:767px) {
	.lecture-teacher-list {
        gap:30px 4%;
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}
	.lecture-teacher-list li {
		/* width:48%; */
	}
	.lecture-teacher-list li .teacher-name {
		font-size:16px;
	}
}
@media only screen and (max-width:480px) {
	.lecture-teacher-list {
		grid-template-columns: repeat(auto-fill, minmax(153px, 1fr));
	}
}


/* cart */
.lecture-cart { 
	/* position:relative; top:auto; */
	display:inline-block;
	margin-left:20px;
	padding:30px;
	width:380px;
	border-radius:4px;
	border:1px solid #ddd;
	background:#fff;
	vertical-align:top;
    position:absolute;
    top:0;
    right:auto;
}
@media only screen and (min-width:1025px) {
	.lecture-cart.fixed {
		position:fixed; top:0;
		margin-top:100px;
	}
	.lecture-cart.on {
		position:absolute; top:auto; bottom:0;
		margin-top:0;
	}
}
.lecture-cart .name {
	margin-bottom:10px;
	/* font-size:0; */
    display:flex;
    flex-wrap:wrap;
}
.lecture-cart .name li {
	position:relative;
	display:inline-block;
	padding:0 10px;
	font-size:16px;
	color:var(--color-dark-gray, #333);
	vertical-align:top;
}
.lecture-cart .name li:first-child {
	padding-left:0;
}
.lecture-cart .name li + li:before {
	content:'';
	position:absolute; top:50%; left:0;
	margin-top:-7px;
	width:1px; height:14px;
	background:#ddd;
}
.lecture-cart .name .teacher-name {
	color:var(--color-primary, #0148d4);
}
.lecture-cart .subject { 
	margin-bottom:10px;
	font-weight:700; font-size:22px; line-height:30px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.lecture-cart .date {
	margin-bottom:17px;
	font-size:16px;
	color:var(--color-gray, #aaa);
	word-break:keep-all;
}
.lecture-cart dl {
	font-size:0;
}
.lecture-cart dl :is(dt,dd) {
	display:inline-block;
	vertical-align:top;
}
.lecture-cart dl dd {
	text-align:right;
}

.lecture-cart .info {
	padding-top:12px;
	border-top:1px solid #ddd;
}
.lecture-cart .info :is(dt,dd) {
	margin:3px 0;
	font-weight:400; font-size:16px;
}
.lecture-cart .info dt {
	width:70px;
	color:var(--color-gray, #aaa);
}
.lecture-cart .info dd {
	width:calc(100% - 70px);
	color:var(--color-dark-gray, #333);
}

.lecture-cart .price {
	margin-top:17px;
	padding-top:20px;
	border-top:1px solid #ddd;
}
.lecture-cart .price dt {
	width:calc(100% - 120px);
}
.lecture-cart .price dd {
	width:120px;
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
}
.lecture-cart .price dd > span {
	display:block;
	font-weight:400; font-size:14px;
	color:var(--color-gray, #aaa);
	text-decoration:line-through;
}
.lecture-cart .price dd em {
	display:inline-block;
	font-style:normal; font-weight:700;
	color:var(--color-red, #dc3545);
}
.lecture-cart .lecture-price {
	overflow-x:hidden;
	margin-top:12px;
	padding-top:15px;
	max-height:87px
}
.lecture-cart .lecture-price :is(dt,dd) {
	display:inline-block;
	margin:5px 0;
	vertical-align:middle;
}

.lecture-cart .total-price {
	margin-top:40px;
}
.lecture-cart .total-price dt {
	width:80px;
	font-weight:400; font-size:16px;
}
.lecture-cart .total-price dd {
	width:calc(100% - 80px);
	font-weight:700; font-size:24px;
	color:var(--color-dark-gray, #333);
}

.lecture-cart .m-price {
	display:none;
	background:#f5f5f7;
	font-size:0;
	text-align:center;
}
.lecture-cart .m-price * {
	display:inline-block;
	font-size:18px; line-height:45px;
	vertical-align:top;
}
.lecture-cart .m-price em {
	font-style:normal; font-weight:700;
	color:var(--color-red, #dc3545);
}
.lecture-cart .m-price span {
	margin:0 10px;
	font-weight:400;
	color:var(--color-gray, #aaa);
	text-decoration:line-through;
}
.lecture-cart .m-price strong {
	font-weight:700; 
	color:var(--color-dark-gray, #333);
}

.lecture-cart .lecture-cart-btn {
	margin-top:10px;
    display:flex;
    gap:0 4px;
}
.lecture-cart .lecture-cart-btn li {
	position:relative;
	width:50px; 
}
.lecture-cart .lecture-cart-btn li a {
	display:block;
	width:100%; 
    height:100%;
}
.lecture-cart .lecture-cart-btn li:nth-child(3) {
	width:calc(100% - 108px);
}
.lecture-cart .lecture-cart-btn li a img {
	position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%);
}
.m-lecture-cart-close {display:none;}

@media only screen and (max-width:1024px) {
	.lecture-view.on:before {
		content:'';
		position:fixed; top:0; left:0;
		z-index:11111;
		width:100%; height:100%;
		background:rgba(0,0,0,.8);
	}
	.lecture-cart {
		position:fixed; bottom:0; left:0;
		z-index:99999;
		margin-left:0; margin-top:0;
		padding:15px;
		width:100%;
		border-radius:0;
		border:0 none;
		background:#fff;
		box-shadow:0 0 8px rgba(0,0,0,.1);
        top:auto;
	}
	.lecture-cart:before {
		content:'';
		position:absolute; bottom:0; left:0;
		width:100%; height:100%;
		z-index:-1;
		background:#fff;
	}
	.lecture-cart :is(.name,.subject,.date,.info,.total-price) {
		display:none;
	}
	.lecture-cart .m-price {
		display:block;
	}
	.lecture-cart .price {	
		margin-top:0;
		border-top:0 none;
	}
	.lecture-cart .lecture-price {
		margin-top:12px; margin-bottom:15px;
		padding:12px 0 0;
		border-top:1px solid #ddd;
	}
	.m-lecture-cart {
		position:fixed; bottom:-100px; left:0;
		z-index:-2;
		padding:12px 15px 0;
		background:#fff;
		box-shadow:0 -8px 8px rgba(0,0,0,.05);
        width:100%;
		transition:.3s;
	}
	.m-lecture-cart.on {
		bottom:128px;
	}
	.m-lecture-cart .m-lecture-cart-close {
		display:block;
		margin-bottom:-5px;
		width:100%; height:30px;
		background:url('/html/images/sub/lecture/player_arrow.png') no-repeat center center;
        text-indent:-9999em;
	}
}
@media only screen and (max-width:767px) {
	.lecture-cart .m-price * {
		font-size:15px; line-height:40px;
	}
	.m-lecture-cart.on {
		bottom:119px;
	}
}



/* -------- player -------- */
/* #lecturePlayer { 
	padding:100px;
	width:100%; min-height:100vh;
	background:#f5f5f7;
}
#lecturePlayer header {
	position:fixed; top:0; left:0;
	z-index:999;
	width:100%; height:80px;
	background:#fff;
	box-shadow:2px 0 5px rgba(0,0,0,.1);
}
#lecturePlayer header h1 {
	display:inline-block;
	padding:20px;
	vertical-align:middle;
}
#lecturePlayer header h1 a {
	display:block;
	line-height:0;
}
#lecturePlayer .login-utils {
	position:absolute; top:50%; right:20px;
	margin-top:-20px; padding-right:70px;
	background:url('/html/images/common/login_icon.png') no-repeat right center;
}
#lecturePlayer .login-utils li a {
	display:block;
	font-weight:500; font-size:16px; line-height:40px;
}
#lecturePlayer .login-utils .join a {
	color:var(--color-gray, #aaa);
}
#lecturePlayer .login-utils .admin a {
	color:#000;
} */
.lecture-player { 
	padding:100px;
	width:100%; min-height:100vh;
	background:#f5f5f7;
}
.lecture-player header {
	position:fixed; top:0; left:0;
	z-index:999;
	width:100%; height:80px;
	background:#fff;
	box-shadow:2px 0 5px rgba(0,0,0,.1);
}
.lecture-player header h1 {
	display:inline-block;
	padding:10px 20px;
	vertical-align:middle;
}
.lecture-player header h1 a {
	display:block;
	line-height:0;
}
.lecture-player header h1 img {height:59px;}
.lecture-player .login-utils {
	position:absolute; top:50%; right:20px;
	margin-top:-20px; padding-right:70px;
	background:url('/html/images/common/login_icon.png') no-repeat right center;
}
.lecture-player .login-utils li a {
	display:block;
	font-weight:500; font-size:16px; line-height:40px;
}
.lecture-player .login-utils .join a {
	color:var(--color-gray, #aaa);
}
.lecture-player .login-utils .admin a {
	color:#000;
}


.player-wrap {
    position:relative;
}
.player-wrap .player-box {
	width:calc(100% - 400px);
}
.player-wrap .player-box .video-wrap {
  position:relative;
  padding-top:56%;
  width:100%; height:auto;
}
.player-wrap .player-box iframe {
  position:absolute;
  top:0; left:0;
  z-index:1;
  width:100%; height:100%;
}
.player-wrap .player-controller {
    display:flex;
	padding:24px 40px 24px 20px;
	border:1px solid #eee;
	background:#fff;
}
.player-wrap .player-controller dl {
	display:inline-block;
	width:calc(100% - 160px);
	vertical-align:middle;
}
.player-wrap .player-controller dt {
	display:block;
	margin-bottom:13px;
	font-weight:700; font-size:16px;
	color:var(--color-primary, #0148d4);
}
.player-wrap .player-controller dd {
	display:block;
	font-weight:700; font-size:22px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.player-wrap .player-controller-btn {
    display:flex;
	width:260px;
	text-align:center;
    justify-content:center;
}
.player-wrap .player-controller-btn li {
	display:inline-block;
	margin-left:40px;
	width:60px;
	vertical-align:middle;
}
.player-wrap .player-controller-btn li:first-child {
	margin-left:0;
}
.player-wrap .player-controller-btn li span {
	display:block;
	margin-top:9px;
	font-weight:700; font-size:16px;
	color:var(--color-dark-gray, #333);
}
.player-wrap .player-controller-btn li.off {
	opacity:.4;
}
.player-wrap .player-controller-btn li img {
    vertical-align:top;
}

.player-wrap .player-list-wrap {
    position:absolute;
    top:0;
    right:0;
    height:100%;
	width:400px;
	border:1px solid #eee;
	vertical-align:top;
    overflow-y:auto;
}

.player-list-wrap .player-list ul {
	display:none;
	background:#f5f5f7;
}
.player-list-wrap .player-list.on ul {
	display:block;
}
.player-list-wrap .player-list > a {
	display:block;
	padding:17px 20px;
	background:#fff url('/html/images/sub/lecture/player_arrow.png') no-repeat 94% center;
	border-top:1px solid #eee;
}
.player-list-wrap .player-list.on > a {
	background:#fff url('/html/images/sub/lecture/player_arrow_on.png') no-repeat 94% center;
}
.player-list-wrap .player-list > a > strong {
	display:block;
	font-weight:400; font-size:17px;
	color:var(--color-dark-gray, #333);
}
.player-list-wrap .player-list > a > span {
	display:block;
	font-weight:400; font-size:16px;
	color:var(--color-gray, #aaa);
}

.player-list-wrap .player-list li {
	border-top:1px solid #eee;
}
.player-list-wrap .player-list li a {
	display:block;
	padding:16px 20px;
}
.player-list-wrap .player-list li strong {
	display:block;
	font-weight:400; font-size:18px;
	color:var(--color-dark-gray, #333);
}
.player-list-wrap .player-list li a > span {
	display:inline-block;
	margin-top:7px;
	font-weight:300; font-size:14px; line-height:15px;
	color:var(--color-gray, #aaa);
	vertical-align:top;
}
.player-list-wrap .player-list li a > span img {
	display:inline-block;
	margin-right:5px;
	vertical-align:top;
}
.player-list-wrap .player-list li.on a strong {
	font-weight:500;
	color:var(--color-primary, #0148d4);
}
.player-list-wrap .player-list li.on a strong span:not(.lecture-password) {
	display:inline-block;
	margin-left:20px;
	width:72px;
	border-radius:13px;
	border:1px solid var(--color-primary, #0148d4);
	background:#fff;
	font-size:14px; line-height:23px;
	color:var(--color-primary, #0148d4);
	text-align:center;
	vertical-align:top;
}
.player-list-wrap .player-list li .lecture-password {display:block; margin-top:8px; font-size:15px;}

@media only screen and (max-width:1300px) {
	#lecturePlayer {
		padding-left:30px; padding-right:30px;
	}
}
@media only screen and (max-width:1024px) {
	.player-wrap .player-box {
		width:100%;
	}
	.player-wrap .player-list-wrap {
		margin-top:30px;
		width:100%;
        position:relative;
	}
}
@media only screen and (max-width:768px) {
	#lecturePlayer {
		padding:90px 20px 40px;
	}

	#lecturePlayer header {
		height:70px;	
	}
	#lecturePlayer header h1 img {
		height:30px;
	}
	#lecturePlayer .login-utils {
		margin-top:-15px;
		padding-right:40px;
		background-size:auto 100%;
	}
	#lecturePlayer .login-utils li a {
		font-size:14px; line-height:30px;	
	}

	.player-wrap .player-controller {
		padding:20px 20px 25px;
        flex-direction:column;
	}
	.player-wrap .player-controller dl {
		width:100%;
	}
	.player-wrap .player-controller dt {
		margin-bottom:8px;
		font-size:14px;
	}
	.player-wrap .player-controller dd {
		font-size:18px;
	}
	.player-wrap .player-controller-btn {
		margin:25px auto 0;
	}
	.player-wrap .player-controller-btn li {
		margin-left:20px;
		width:50px;
	}
	.player-wrap .player-controller-btn li img {
		height:18px;
	}
	.player-wrap .player-controller-btn li span {
		margin-top:4px;
		font-size:13px;
	}

	.player-list-wrap .player-list > a {
		padding:10px 15px;
	}
	.player-list-wrap .player-list li a {
		padding:12px 15px;
	}
	.player-list-wrap .player-list > a > strong {
		font-size:14px;
	}
	.player-list-wrap .player-list > a > span {
		margin-bottom:3px;
		font-size:13px;
	}
	.player-list-wrap .player-list li strong {
		font-size:15px;
	}
	.player-list-wrap .player-list li.on a strong span {
		margin-left:10px;
		padding:0 8px;
		width:auto;
		font-size:12px; line-height:20px;
	}
	.player-list-wrap .player-list li a > span {
		margin-top:5px;
		font-size:12px; line-height:13px;
	}
	.player-list-wrap .player-list li a > span img {
		margin-top:1px;
		width:13px;
	}
}


/* 강사소개
------------------------------------------------------ */
/* -------- 강사리스트 -------- */
.teacher-list { 
	position:relative; 
	display:grid;
    grid-template-columns:repeat(auto-fill, minmax(225px, 1fr));
	width:100%;
    gap:50px 20px;
}
.teacher-box { 
	vertical-align:top;
    width: 100%;
}
.teacher-box a { 
	display:block;
	/* text-align:center; */
}
.teacher-box .teacher-photo { 
	overflow:hidden;
	border-radius:35%;
	border:1px solid #eee;
	background:#f5f5f7;
	aspect-ratio:1/1;
}
.teacher-box .teacher-photo img { 
	width:100%;	
    height:100%;
    object-fit:cover;
}
/* .teacher-box .teacher-name { 
	display:block;
	margin-top:20px;
	font-size:16px;
	color:var(--color-gray, #aaa);
	text-align:left;
} */
.teacher-box .teacher-name { 
	display:block;
	margin-top:20px;
	font-weight:700; font-size:20px;
	color:#000;
	text-align:center;
}

@media only screen and (max-width:640px) {
	.teacher-list {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
		gap:30px 10px;
	}
	.teacher-box .teacher-name {
		margin-top:10px;
		/* font-size:12px; */
		font-size:17px;
	}
	.teacher-box .teacher-name strong {
		margin-top:2px;
		font-size:17px;
	}
}
@media only screen and (max-width:480px) {
	.teacher-list {
		grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
	}
}
/* -------- 강사상세 -------- */
.teacher-view { 
    display:flex;
    flex-wrap:wrap;
}
.teacher-view .teacher-photo { 
	width:40.678%;
}
.teacher-view .teacher-photo img { 
	overflow:hidden;
	width:100%; 
	border-radius:4px;
	border:1px solid #eee;
	vertical-align:top;
}
.teacher-view .teacher-detail { 
	padding-left:60px;
	width:calc(100% - 40.678%);
}
.teacher-view .teacher-detail-header { 
	margin-bottom:60px;	 
}
.teacher-view .teacher-detail-header .cate { 
	display:inline-block;
	margin-bottom:12px; padding:0 12px;
	border-radius:4px;
	border:1px solid #eee;
	font-weight:500; font-size:16px; line-height:30px;
	color:var(--color-gray, #aaa);
}
.teacher-view .teacher-detail-header .name { 
	margin-bottom:20px;
	font-weight:700; font-size:24px;
	color:var(--color-dark-gray, #333);
}
.teacher-view .teacher-detail-header .name strong { 
	font-size:32px; 
}
.teacher-view .teacher-detail-header .slogan { 
	font-size:24px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.teacher-view .teacher-info { 
	margin-top:45px; 
}
.teacher-view .teacher-info h1 { 
	margin-bottom:15px;
	font-weight:700; font-size:20px;
	color:var(--color-dark-gray, #333);
}
.teacher-view .teacher-info ul li { 
	margin:3px 0;
	font-size:16px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.teacher-view .lecture-list { 
	left:0;
	margin-top:45px; margin-bottom:-30px;
	width:100%;
}
.teacher-view .lecture-list h1 { 
	margin-bottom:20px;
	font-weight:700; font-size:20px;
	color:var(--color-dark-gray, #333);
}
.teacher-view .lecture-list ul {
	width:100%;
	font-size:0;
}
.teacher-view .lecture-list ul li { 
	display:inline-block;
	margin-left:30px; margin-bottom:30px;
	max-width:228px; width:calc(50% - 15px);
	vertical-align:top;
}
.teacher-view .lecture-list ul li:nth-child(2n+1) { 
	margin-left:0; 
}
.teacher-view .lecture-list ul li a { 
	display:block; 
}
.teacher-view .lecture-list ul li .thumb { 
	overflow:hidden;
	border-radius:6px;
}
.teacher-view .lecture-list ul li .thumb img { 
	width:100%; 
}
.teacher-view .lecture-list ul li .subject {	
	display:block;
	margin-top:15px; 
	font-size:16px; line-height:20px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}

@media only screen and (max-width:767px) {
	.teacher-view .teacher-photo {
		width:100%;
		text-align:center;
	}
	.teacher-view .teacher-photo img {
		max-width:100%;
		width:auto;
	}

	.teacher-view .teacher-detail {
		margin-top:50px; padding:0 30px;
		width:100%;
	}
}
@media only screen and (max-width:640px) {
	.teacher-view .teacher-detail {
		margin-top:30px; padding:0;
		width:100%;
	}
	.teacher-view .teacher-detail-header {
		margin-bottom:30px;
	}
	.teacher-view .teacher-detail-header .cate {
		margin-bottom:10px;
		padding:0 10px;
		font-size:14px; line-height:25px;
	}
	.teacher-view .teacher-detail-header .name {
		margin-bottom:10px;
		font-size:18px;
	}
	.teacher-view .teacher-detail-header .name strong {
		font-size:24px;
	}
	.teacher-view .teacher-detail-header .slogan {
		font-size:18px;
	}

	.teacher-view .teacher-info {
		margin-top:30px;
	}
	.teacher-view .teacher-info h1 {
		margin-bottom:10px;
		font-size:16px;
	}

	.teacher-view .lecture-list {
		margin-bottom:-20px;
	}
	.teacher-view .lecture-list h1 {
		margin-bottom:10px;
		font-size:16px;
	}
	.teacher-view .lecture-list ul li {
		margin-left:10px; margin-bottom:20px;
		width:calc(50% - 5px);
	}
	.teacher-view .lecture-list ul li .subject {
		margin-top:10px;
		font-size:14px; line-height:18px;
	}
}

/* 학습도서
------------------------------------------------------ */
/* -------- 상세 -------- */
.shop-view {
}

.shop-view-header {
	margin-bottom:60px;
	display:flex;
    flex-wrap:wrap;
}
.shop-view-header > * {
	display:inline-block;
	vertical-align:top;
}
.shop-view-header .goods-img {
	padding:65px 0;
	width:45.764%;
	background:#eee;
	text-align:center;
}
.shop-view-header .goods-img a {
	display:block;
}
.shop-view-header .goods-img img {
	display:inline-block;
	max-width:270px;
	box-shadow:10px 0 10px rgba(0,0,0,.15);
}
.shop-view-header .goods-info {
	width:calc(100% - 45.764%);
	padding-left:5%;
}
.shop-view-header .goods-info .goods-tit {
	font-weight:500; font-size:18px; line-height:1.2;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.shop-view-header .goods-info .goods-tit strong {
	display:block;
	font-weight:700; font-size:28px;
}
.shop-view-header .goods-info .goods-detail {
	margin-top:6px; margin-bottom:35px;
	font-size:0;
}
.shop-view-header .goods-info .goods-detail li {
	position:relative;
	display:inline-block;
	padding:0 5px;
	font-weight:300; font-size:14px;
	color:var(--color-gray, #aaa);
	vertical-align:top;
}
.shop-view-header .goods-info .goods-detail li:first-child {
	padding-left:0;
}
.shop-view-header .goods-info .goods-detail li:after {
	content:'';
	position:absolute; top:50%; right:0;
	margin-top:-7px;
	width:1px; height:14px;
	background:#b5b5b5;
}
.shop-view-header .goods-info .goods-detail li:last-child:after {
	display:none;
}

.shop-view-header .goods-info .price {
	margin-bottom:30px;
}
.shop-view-header .goods-info .price li {
	font-weight:500; font-size:16px;
	color:var(--color-dark-gray, #333);
}
.shop-view-header .goods-info .price li span {
	font-weight:400;
	color:var(--color-gray, #aaa);
}
.shop-view-header .goods-info .price li strong {
	font-weight:700; font-size:24px;
	color:var(--color-dark-gray, #333);
}
.shop-view-header .goods-info .price .point {
	margin-top:5px;
	font-weight:700; font-size:18px;
	color:var(--color-primary, #0148d4);
}

.shop-view-header .goods-info .book-info {
	margin-bottom:35px;
	font-size:0;
}
.shop-view-header .goods-info .book-info dt,
.shop-view-header .goods-info .book-info dd {
	display:inline-block;
	margin:4px 0;
	font-weight:400; font-size:16px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
	vertical-align:top;
}
.shop-view-header .goods-info .book-info dt {
	width:100px;
	color:var(--color-gray, #aaa);
}
.shop-view-header .goods-info .book-info dd {
	width:calc(100% - 100px);
}


.shop-view-header .shop-option {
	margin-bottom:50px;
	padding-top:30px;
	border-top:1px solid #ddd;
}
.shop-view-header .shop-option > ul {
	font-size:0;
}
.shop-view-header .shop-option > ul > li {
	display:inline-block;
	width:240px;
	vertical-align:top;
}
.shop-view-header .shop-option > ul > li:last-child {
	width:calc(100% - 240px);
	text-align:right;
}
.shop-view-header .shop-option label {
	display:inline-block;
	width:100px;
	font-size:16px; line-height:38px;
	color:var(--color-dark-gray, #333);
	vertical-align:top;
}
.shop-view-header .shop-option > ul > li:last-child label {
	width:110px;
	text-align:left;
}
.shop-view-header .shop-option label + * {
	display:inline-block;
	vertical-align:top;
}
.shop-view-header select {
	width:120px;
	/* padding:0 10px;
	height:30px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
	font-size:16px;
	color:var(--color-dark-gray, #333);
    -webkit-appearance: none;
    -moz-appearance: none; */
	/* background:#fff url('/html/images/sub/shop/select_arrow.png') no-repeat 90% center; */
}
/* .shop-view-header select::-ms-expand {
	display: none;
} */
.shop-view-header .shop-option > ul > li strong {
	font-weight:700; font-size:24px; line-height:38px;
	color:var(--color-dark-gray, #333);
}

.shop-view-header .goods-info .shop-cart-btn {
    display:flex;
    gap:10px;
}
.shop-view-header .goods-info .shop-cart-btn li {
	width:calc(25% - 10px);
    flex-grow:1;
}
.shop-view-header .goods-info .shop-cart-btn li:last-child {
	width:50%;
}
.shop-view-header .goods-info .shop-cart-btn li :is(a,button) {
	display:block;
    height:100%;
    min-width:auto;
    padding-left:4px;
    padding-right:4px;
    width:100%;
}
.shop-view-header .goods-info .shop-cart-btn li .bd-gray {
	color:var(--color-dark-gray, #333);
}
.shop-view-header .goods-info .shop-cart-btn li a img {
	position:relative; top:3px;
	display:inline-block;
	margin-right:14px;
}

@media only screen and (max-width:1024px) {
	.shop-view-header .goods-img {
		width:100%;
	}
	.shop-view-header .goods-info {
		margin-top:5%;
		padding-left:0;
		width:100%;
	}
}
@media only screen and (max-width:767px) {
	.shop-view-header .goods-img {
		padding:40px 0;
	}
	.shop-view-header .goods-img img {
		max-width:40%;
	}
	.shop-view-header .goods-info .goods-tit {
		font-size:14px;
	}
	.shop-view-header .goods-info .goods-tit strong {
		margin-top:3px;
		font-size:19px;
	}
	.shop-view-header .goods-info .goods-detail {
		margin:3px 0 25px;
	}
	.shop-view-header .goods-info .goods-detail li {
		font-size:12px;
	}
	.shop-view-header .goods-info .goods-detail li:after {
		margin-top:-5px;
		height:10px;
	}
	.shop-view-header .goods-info .price {
		margin-bottom:20px;
	}
	.shop-view-header .goods-info .price li {
		font-size:13px;
	}
	.shop-view-header .goods-info .price li strong {
		font-size:20px;
	}
	.shop-view-header .goods-info .price .point {
		margin-top:2px;
		font-size:15px;
	}
	.shop-view-header .goods-info .book-info {
		margin-bottom:0;
	}
	.shop-view-header .goods-info .book-info dt, 
	.shop-view-header .goods-info .book-info dd {
		margin:2px 0;
		font-size:13px;
	}
	.shop-view-header .goods-info .book-info dt {
		width:70px;
	}
	.shop-view-header .goods-info .book-info dd {
		width:calc(100% - 70px);
	}

	.shop-view-header .shop-menu-btn {
		position:fixed; bottom:0; left:0;
		z-index:44;
		padding:15px;
		width:100%;
		background:#fff;
		box-shadow:0 0 10px rgba(0,0,0,.15);
	}
	.shop-view-header .shop-option {
		margin-bottom:10px;
		padding:5px 20px;
		border-top:0 none;
		background:#f5f5f7;
	}
	.shop-view-header .shop-option label {
		width:60px;
		font-size:13px; line-height:30px;
	}
	.shop-view-header .shop-option > ul > li strong {
		font-size:18px; line-height:30px;
	}
	.shop-view-header .shop-option > ul > li {
		width:160px;
	}
	.shop-view-header .shop-option > ul > li:last-child {
		width:calc(100% - 160px);
	}
	.shop-view-header .shop-option > ul > li:last-child label {
		width:65px;
		font-size:11px;
	}
	.shop-view-header .shop-option .quantity-wrap {
		width:82px;
	}
	.shop-view-header .shop-option .quantity-wrap button {
		width:25px; height:30px;
	}
	.shop-view-header .shop-option .quantity-wrap input {
		width:30px; height:30px;
		font-size:15px;
	}
	.shop-view-header .shop-option select {
		padding:0 10px;
		width:100px; height:30px;
		font-size:15px;
		background-size:auto 5px;
	}
	.shop-view-header .goods-info .shop-cart-btn li {
		margin-left:4px;
	}
	.shop-view-header .goods-info .shop-cart-btn li:first-child {
		margin-left:0;
	}
	.shop-view-header .goods-info .shop-cart-btn li:last-child {
		width:calc(100% - 108px);
	}
	.shop-view-header .goods-info .shop-cart-btn :is(li:nth-of-type(1),li:nth-of-type(2)) {
		width:50px;
	}
	.shop-view-header .goods-info .shop-cart-btn :is(li:nth-of-type(1),li:nth-of-type(2)) a {
		position:relative;
		font-size:0; 
	}
	.shop-view-header .goods-info .shop-cart-btn :is(li:nth-of-type(1),li:nth-of-type(2)) a img {
		position:absolute; top:50%; left:50%;
		transform:translate(-50%,-50%);
		margin-right:0;
	}
}

.shop-view-detail > section {
	display:none;
}
.shop-view-detail > section.on {
	display:block;
}
.shop-view-detail .detail-contents {padding-top:25px;}


.shop-view-tab {
	border-bottom:2px solid #eee;
	/* font-size:0; */
    display:flex;
    flex-wrap:wrap;
}
.shop-view-tab li {
	display:inline-block;
	margin-right:40px;
	width:auto;
	vertical-align:top;
}
.shop-view-tab li:last-child {
	margin-right:0;
}
.shop-view-tab li a {
	position:relative;
	display:block;
	font-size:20px; line-height:40px;
	color:var(--color-dark-gray, #333);
}
.shop-view-tab li.on a {
	font-weight:700;
}
.shop-view-tab li.on a:after {
	content:'';
	position:absolute; bottom:-2px; left:0;
	width:100%; height:4px;
	background:var(--color-primary, #0148d4);
}

@media only screen and (max-width:768px) {
	.shop-view-tab li {
		margin-right:25px;
	}
	.shop-view-tab li a {
		font-size:18px; line-height:36px;
	}
    .shop-view-detail .detail-contents {padding-top:15px;}
}

@media only screen and (max-width:640px) {
	.shop-view-tab li {
		margin-right:15px;
	}
	.shop-view-tab li a {
		font-size:14px; line-height:32px;
	}
	.shop-view-tab li.on a:after{
		height:3px;
	}
}



.basic-tab {
	border-bottom:2px solid #eee;
	/* font-size:0; */
    display:flex;
    flex-wrap:wrap;
}
.basic-tab li {
	display:inline-block;
	margin-right:40px;
	width:auto;
	vertical-align:top;
}
.basic-tab li:last-child {
	margin-right:0;
}
.basic-tab li a {
	position:relative;
	display:block;
	font-size:20px; line-height:40px;
	color:var(--color-dark-gray, #333);
}
.basic-tab li.on a {
	font-weight:700;
}
.basic-tab li.on a:after {
	content:'';
	position:absolute; bottom:-2px; left:0;
	width:100%; height:4px;
	background:var(--color-primary, #0148d4);
}
@media only screen and (max-width:768px) {
	.basic-tab li {
		margin-right:25px;
	}
	.basic-tab li a {
		font-size:18px; line-height:36px;
	}
}
@media only screen and (max-width:640px) {
	.basic-tab li {
		margin-right:15px;
	}
	.basic-tab li a {
		font-size:14px; line-height:32px;
	}
	.basic-tab li.on a:after{
		height:3px;
	}
}




.shop-view-detail .shop-view-tit {
	display:block;
	margin:45px 0 15px;
	font-weight:700; font-size:24px;
	color:var(--color-dark-gray, #333);
}
.shop-view-detail .shop-view-tit span {
	font-size:18px;
}
.shop-view-detail p {
	font-weight:400; font-size:16px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.shop-view-detail ul + ul {
	margin-top:15px;
}
.shop-view-detail ul li {
	font-weight:400; font-size:16px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.detail-contents .text-tiny {
    font-size: 0.7em;
}
.detail-contents .text-small {
    font-size: 0.85em;
}
.detail-contents .text-big {
    font-size: 1.4em;
}
.detail-contents .text-huge {
    font-size: 1.8em;
}
.detail-contents img {
    max-width:100%;
}

@media only screen and (max-width:767px) {
	.shop-view-detail .shop-view-tit {
		margin:25px auto 8px;
		font-size:16px;
	}
	.shop-view-detail .shop-view-tit span {
		font-size:14px;
	}
	.shop-view-detail p ,
	.shop-view-detail ul li {
		font-size:12px;
	}
}

.shop-view-detail .shop-view-banner {
	position:relative;
	margin-top:50px; padding:11.865% 0;
	width:100%; 
	background:#e8e2e4 url('/html/images/sub/shop/shop_view_banner.jpg') no-repeat right center;
	background-size:cover;
}
.shop-view-detail .shop-view-banner h1 {
	position:absolute; top:50%; left:7%;
	transform:translateY(-50%);
	padding-top:5px;
	font-weight:400; font-size:20px;
	color:var(--color-dark-gray, #333);
}
.shop-view-detail .shop-view-banner h1 span {
	font-size:28px;
}
.shop-view-detail .shop-view-banner h1 strong {
	font-weight:700; font-size:40px;
	color:var(--color-primary, #0148d4);
}

@media only screen and (max-width:1180px) {
	.shop-view-detail .shop-view-banner h1 {
		left:5%;
		font-size:17px;
	}
	.shop-view-detail .shop-view-banner h1 span {
		font-size:22px;
	}
	.shop-view-detail .shop-view-banner h1 strong {
		font-size:32px;
	}
}
@media only screen and (max-width:850px) {
	.shop-view-detail .shop-view-banner h1 {
		font-size:14px;
	}
	.shop-view-detail .shop-view-banner h1 span {
		font-size:17px;
	}
	.shop-view-detail .shop-view-banner h1 strong {
		font-size:24px;
	}
}
@media only screen and (max-width:767px) {
	.shop-view-detail .shop-view-banner {
		margin-top:30px;
		padding:16% 0;
		background-position:75% center;
	}
	.shop-view-detail .shop-view-banner h1 {
		left:6%;
		padding-top:0;
		max-width:50%;
		font-size:10px;
	}
	.shop-view-detail .shop-view-banner h1 span {
		margin-bottom:3px;
		font-size:13px;
	}
	.shop-view-detail .shop-view-banner h1 strong {
		font-size:16px;
	}
}

.shop-view-detail .lecture-list {
    margin-top:45px;
    display:flex;
    row-gap:50px;
}
.shop-view-detail .lecture-list .swiper-slide .thumb {
	overflow:hidden;
	border-radius:4px;
    width:100%;
    aspect-ratio:18/10.1;
}
.shop-view-detail .lecture-list .lecture-box .txt-wrap {
	padding:10px;
}
.shop-view-detail .lecture-list .lecture-box .txt-wrap span {
	display:block;
	font-size:14px;
	color:var(--color-gray, #aaa);
	letter-spacing:-0.7px;
}
.shop-view-detail .lecture-list .lecture-box .txt-wrap em {
	display:inline-block;
	margin-right:10px; padding:0 14px;
	border-radius:4px;
	background:var(--color-primary, #0148d4);
	font-style:normal; font-weight:700; font-size:14px; line-height:30px;
	color:#fff;
}
.shop-view-detail .lecture-list .lecture-box .txt-wrap strong {
	display:block;
	margin-top:5px;
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
	letter-spacing:-0.7px;
	word-break:keep-all;
}

@media only screen and (max-width:1024px) {
	.shop-view-detail .lecture-list .swiper-wrapper {
		flex-wrap:nowrap;
	}
}
@media only screen and (max-width:767px) {
	.shop-view-detail .lecture-list {
		margin-top:25px;
        gap:6vw 4%;
	}
    .shop-view-detail .lecture-list .lecture-box {
        width:48%;
    }
}
@media only screen and (max-width:640px) {
	.shop-view-detail .lecture-list .lecture-box .txt-wrap span {
		font-size:13px;
	}
	.shop-view-detail .lecture-list .lecture-box .txt-wrap em {
		margin-right:7px;
		padding:0 10px;
		font-size:13px; line-height:24px;
	}
	.shop-view-detail .lecture-list .lecture-box .txt-wrap strong {
		font-size:15px; line-height:1.3;
	}
}

.shop-view-detail .photo-reivew-wrap {
	position:relative;
}
.shop-view-detail .photo-reivew-list {
	overflow:hidden;
	position:relative; left:-10px;
	width:calc(100% + 20px);
}
.shop-view-detail .photo-reivew-list .swiper-slide {
	padding:0 10px;
	width:150px;
	line-height:0;
}
.shop-view-detail .photo-reivew-list .swiper-slide a {
	display:block;
    aspect-ratio:6.5/6.4;
}
.shop-view-detail .photo-reivew-list .swiper-slide a img {
	overflow:hidden;
	width:100%;
	border-radius:4px;
    height:100%;
    object-fit:cover;
}
.photo-reivew-wrap :is(.swiper-button-next,.swiper-button-prev) {
	z-index:111;
	margin-top:-30px;
	width:60px; height:60px;
	border-radius:50%;
	background:#fff;
	box-shadow:0 0 3px rgba(0,0,0,.1);
}
.photo-reivew-wrap .swiper-button-prev {
	left:-30px;
	background:#fff url('/html/images/sub/shop/review_prev.png') no-repeat center center;
}
.photo-reivew-wrap .swiper-button-next {
	right:-30px;
	background:#fff url('/html/images/sub/shop/review_next.png') no-repeat center center;
}
.photo-reivew-wrap :is(.swiper-button-prev,.swiper-button-next):after {
	display:none;
}

@media only screen and (max-width:1180px) {
	.shop-view-detail .photo-reivew-wrap {
		padding-left:30px;
		width:calc(100% + 30px);
	}
	.photo-reivew-wrap .swiper-button-prev {
		left:0;
	}
	.photo-reivew-wrap .swiper-button-next {
		right:23px;
	}
}
@media only screen and (max-width:768px) {
	.shop-view-detail .photo-reivew-wrap {
		padding-left:20px;
		width:calc(100% + 20px);
	}
}
@media only screen and (max-width:767px) {
	.shop-view-detail .photo-reivew-list {
		left:-5px;
		width:calc(100% + 10px);
	}
	.shop-view-detail .photo-reivew-list .swiper-slide {
		padding:0 5px;
		width:90px;
	}
	.photo-reivew-wrap :is(.swiper-button-next,.swiper-button-prev) {
		margin-top:-20px;
		width:40px; height:40px;
		background-size:auto 13px;
	}
}


.shop-view-detail .photo-reivew-wrap + .shop-view-tit {
	margin:60px 0 0; padding:27px 0 30px;
	border-top:1px solid var(--color-dark-gray, #333);
}
.shop-view-detail .shop-detail-review {
	border-top:1px solid #eee;
}
.shop-view-detail .shop-review-list {
	padding:37px 30px;
	border-bottom:1px solid #eee;
}
.shop-view-detail .shop-review-list .review-header {
	font-size:0;
}
.shop-view-detail .shop-review-list .review-header ul {
	display:inline-block;
	margin-top:0;
	width:50%;
	font-size:0;
	vertical-align:middle;
}
.shop-view-detail .shop-review-list .review-header ul:last-child {
	text-align:right;
}
.shop-view-detail .shop-review-list .review-header ul li {
	display:inline-block;
	vertical-align:middle;
}
.shop-view-detail .shop-review-list .review-header ul li:first-child {
	margin-right:25px;
}
.shop-view-detail .shop-review-list .review-header ul:last-child li {
	margin-left:20px;
}
.shop-view-detail .shop-review-list .review-header .grade {
	line-height:0;
}
.shop-view-detail .shop-review-list .review-header .grade .grade-wrap { 
	display:inline-block; 
	width:96px; height:16px;
	background:url('/html/images/sub/board/grade.png') no-repeat left center;
	text-align:left;
	vertical-align:middle;
}
.shop-view-detail .shop-review-list .review-header .grade .grade-wrap span { 
	display:inline-block; 
	height:16px;
	background:url('/html/images/sub/board/grade_on.png') no-repeat left center;
	vertical-align:top;
}
.shop-view-detail .shop-review-list .review-header .subject {
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.shop-view-detail .shop-review-list .review-header .name {
	font-size:18px;
	color:var(--color-dark-gray, #333);
}
.shop-view-detail .shop-review-list .review-header ul:last-child li:first-child {
	margin-left:0;
}
.shop-view-detail .shop-review-list .review-header .date {
	font-size:16px;
	color:var(--color-gray, #aaa);
}
.shop-view-detail .shop-review-list .conts {
	overflow:hidden;
	display:block;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	margin-top:30px;
	height:44px;
	font-weight:400; font-size:15px; line-height:22px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.shop-view-detail [class^="btn"] {
	display:block;
	margin:40px auto 0;
	width:300px;
}
.shop-view-detail .shop-review-list .reply-cont {
	margin-top:30px;
    border-top:1px solid #eee;
}

@media only screen and (max-width:767px) {
	.shop-view-detail .photo-reivew-wrap + .shop-view-tit {
		margin-top:30px;
		padding:20px 0;
	}
	.shop-view-detail .shop-review-list {
		padding:20px 10px;
	}
	.shop-view-detail .shop-review-list .review-header ul {
		width:100%;
	}
	.shop-view-detail .shop-review-list .review-header ul:last-child {
		margin-top:5px;
		text-align:left;
	}
	.shop-view-detail .shop-review-list .review-header ul li:first-child {
	margin-right:15px;
	}
	.shop-view-detail .shop-review-list .review-header .grade .grade-wrap {
		width:72px; height:12px;
		background-size:auto 100%;
	}
	.shop-view-detail .shop-review-list .review-header .grade .grade-wrap span {
		height:12px;
		background-size:auto 100%;
	}
	.shop-view-detail .shop-review-list .review-header .subject {
		font-size:15px;
	}
	.shop-view-detail .shop-review-list .conts {
		margin-top:15px;
		-webkit-line-clamp:3;
		height:54px;
		font-size:13px; line-height:18px;
	}
	.shop-view-detail [class^="btn"] {
		margin-top:25px;
		width:100%; 
	}
    .shop-view-detail .shop-review-list .reply-cont {
        margin-top:15px;
    }
}

.goods-thumb-popup {
	position:fixed; top:0; left:0;
	z-index:9999;
	width:100%; height:100%;
	background:rgba(0,0,0,.8);
	display:none;
}
.goods-thumb-popup.on {
	display:block;
}
.goods-thumb-popup .goods-thumb-popup-zoom {
	position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
}
.goods-thumb-popup .goods-thumb-popup-zoom img {
	max-width:100%;
}

.photo-review-detail-popup {
	position:fixed; top:0; left:0;
	z-index:9999;
	width:100%; height:100%;
	background:rgba(0,0,0,.8);
}
.photo-review-detail-popup .photo-review-detail-popup-inner {
	overflow:hidden;
	position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%);
	width:100%; max-width:860px;
	height:100%; max-height:550px;
	border-radius:4px;
	background:#fff;
	font-size:0;
}

.photo-review-detail-wrap {
	overflow:hidden;
	display:inline-block;
	width:55.815%;
	vertical-align:middle;
}
.photo-review-detail-list {
	width:100%; height:480px;
	background:#f5f5f7;
}
.photo-review-detail-list .swiper-slide a {
	display:flex;
	width:100%; height:100%;
	align-items:center;
}
.photo-review-detail-list .swiper-slide a img {
	width:100%;
}

.photo-review-detail-thumb {
	padding:0 19px;
}
.photo-review-detail-thumb .swiper-slide {
	margin:0 1px;
	width:50px; height:50px;
}
.photo-review-detail-thumb .swiper-slide a {
	position:relative;
	display:block;
	background:#000;
    aspect-ratio:1/1;
}
.photo-review-detail-thumb .swiper-slide a img {
	width:100%;
	opacity:.6;
    height:100%;
    object-fit:cover;
}
.photo-review-detail-thumb .swiper-slide.swiper-slide-thumb-active a img {
	opacity:1;
}
.photo-review-detail-thumb .swiper-slide.swiper-slide-thumb-active a:after {
	content:'';
	position:absolute; top:0; left:0;
	width:100%; height:100%;
	border:4px solid #000;
	box-sizing:border-box;
}

.photo-review-detail-popup .photo-review-detail-conts {
	overflow-x:hidden;
	display:inline-block;
	padding-left:20px; padding-right:10px;
	width:calc(100% - 55.815%); height:400px;
	vertical-align:middle;
}
.photo-review-detail-popup .photo-review-detail-conts .subject {
	margin-bottom:15px;
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
}
.photo-review-detail-popup .photo-review-detail-conts .grade {
	line-height:0;
}
.photo-review-detail-popup .photo-review-detail-conts .grade .grade-wrap { 
	display:inline-block; 
	width:96px; height:16px;
	background:url('/html/images/sub/board/grade.png') no-repeat left center;
	text-align:left;
	vertical-align:middle;
}
.photo-review-detail-popup .photo-review-detail-conts .grade .grade-wrap span { 
	display:inline-block; 
	height:16px;
	background:url('/html/images/sub/board/grade_on.png') no-repeat left center;
	vertical-align:top;
}
.photo-review-detail-popup .photo-review-detail-conts ul {
	margin-top:5px;
	font-size:0;
}
.photo-review-detail-popup .photo-review-detail-conts ul li {
	display:inline-block;
	font-size:14px;
	color:var(--color-dark-gray, #333);
	vertical-align:middle;
}
.photo-review-detail-popup .photo-review-detail-conts ul li:last-child {
	margin-left:15px;
	font-weight:300;
	color:var(--color-gray, #aaa);
}
.photo-review-detail-popup .photo-review-detail-conts .conts {
	margin-top:10px;
	padding-top:23px; 
	width:calc(100% - 30px);
	border-top:1px solid #eee;
	font-size:14px; line-height:22px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.photo-review-detail-popup .close {
	position:absolute; top:37px; right:37px;
	width:42px; height:42px;
	font-size:0;
}
.photo-review-detail-popup .close:before,
.photo-review-detail-popup .close:after {
	content:'';
	position:absolute; top:50%; left:0;
	width:100%; height:2px;
	border-radius:5px;
	background:var(--color-gray, #aaa);
}
.photo-review-detail-popup .close:before {
	transform:rotate(45deg);
}
.photo-review-detail-popup .close:after {
	transform:rotate(-45deg);
}

@media only screen and (max-width:920px) {
	.photo-review-detail-popup .photo-review-detail-popup-inner {
		left:30px;
		transform:translateY(-50%);
		max-width:calc(100% - 60px);
	}
}
@media only screen and (max-width:767px) {
	.photo-review-detail-popup .photo-review-detail-popup-inner {
		overflow-y:auto;
		padding-bottom:20px;
		height:auto;
		max-height:calc(100vh - 40px);
	}
	.photo-review-detail-wrap {
		width:100%;
	}
	.photo-review-detail-list {
		padding:10% 0;
		height:auto;
	}
	.photo-review-detail-thumb {
		padding:0 9px;
	}
	.photo-review-detail-thumb .swiper-slide {
		width:40px; height:40px;
	}

	.photo-review-detail-popup .photo-review-detail-conts {
		margin-top:40px; padding-right:0;
		width:100%; height:auto;
	}
	
	.photo-review-detail-popup .close {
		top:17px; right:17px;
		width:32px; height:32px;
	}
}
@media only screen and (max-width:640px) {
	.photo-review-detail-popup .close {
		top:10px; right:15px;
	}
	.photo-review-detail-list {
		padding:15% 0;
	}
}


/* -------- 학습도서 -------- */
.book-list { 
    display:flex; flex-wrap:wrap;
	position:relative; left:-10px;
	margin-bottom:-50px;
	width:calc(100% + 20px);
	font-size:0;

    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:50px 20px;
    width:100%;
    margin-bottom:0;
    left:0;
}
.book-list .book-box { 
    display:flex;
    flex-direction:column;
	margin-bottom:50px;
	padding:0 10px;
	width:25%;
	vertical-align:top;

    padding:0;
    width:100%;
}
.book-list .book-box .thumb { 
	overflow:hidden;
	background:#f5f5f7; 
}
.book-list .book-box .thumb a { 
	display:block;
	margin:0 30px;
	text-align:center;
    aspect-ratio:2.9/4;
}
.book-list .book-box .thumb img { 
	display:inline-block;
	width:100%; height:100%;
	transform: scale(1);
	transition:.3s;
    object-fit:cover;
}
.book-list .book-box:hover .thumb img { 
	transform: scale(1.38);
}
.book-list .book-box .book-info { 
    flex-grow:1;
	border-radius:0 0 4px 4px;
	background:#fff;
	transition:.3s;
}
.book-list .book-box:hover .book-info { 
	box-shadow:0 0 15px rgba(0,0,0,.15);
}
.book-list .book-box .book-info>a{
    display:block;
	padding:17px 10px 10px;
}
.book-list .book-box .book-info .cate { 
	font-size:0; 
}
.book-list .book-box .book-info .cate li { 
	position:relative;
	display:inline-block;
	padding:0 5px;
	font-size:14px;
	color:var(--color-gray, #aaa);
	vertical-align:top;
}
.book-list .book-box .book-info .cate li:first-child { 
	padding-left:0; 
}
.book-list .book-box .book-info .cate li:after { 
	content:'';
	position:absolute; top:50%; right:0;
	margin-top:-6px;
	width:1px; height:14px;
	background:var(--color-gray, #aaa);
}
.book-list .book-box .book-info .cate li:last-child:after { 
	display:none; 
}
.book-list .book-box .book-info .subject { 
	display:block;
	margin-top:5px;
	font-weight:700; font-size:18px; line-height:1.1;
	color:#000;
	word-break:keep-all;
}
.book-list .book-box .book-info .price { 
	margin-top:5px;
	font-size:18px;
	color:#111;
}
.book-list .book-box .book-info .price strong { 
	font-weight:500; 
}
.book-list .book-box .book-info .price span { 
	font-size:15px; 
    color:var(--color-gray, #aaa);
	text-decoration:line-through;
}
.book-list .book-box .price-wrap .discount span { 
	color:var(--color-gray, #aaa);
	text-decoration:line-through;
}
.book-list .book-box .book-info .book-label { 
	margin-top:5px;
	font-size:0; 
}
.book-list .book-box .book-info .book-label li { 
	display:inline-block;
	margin-left:4px; padding:0 11px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
	font-size:13px; line-height:20px;
	color:var(--color-dark-gray, #333);
	vertical-align:top;
}
.book-list .book-box .book-info .book-label li:first-child { 
	margin-left:0; 
}

@media only screen and (max-width:1180px) {
    .book-list {
        grid-template-columns:repeat(auto-fill, minmax(205px, 1fr));
    }
}
@media only screen and (max-width:850px) {
	.book-list .book-box {
		width:33.333%;

        width:100%;
	}
}
@media only screen and (max-width:640px) {
	.book-list {
		left:-5px;
		margin-bottom:-30px;
		width:calc(100% + 10px);

        left:0;
        width:100%;
        gap:30px 10px;
	}
	.book-list .book-box {
		margin-bottom:30px;
		padding:0 5px;
		width:50%;
        
        padding:0;
        width:100%;
	}
	.book-list .book-box .book-info>a {
		padding:12px 7px 7px;
	}
	.book-list .book-box .book-info .cate li {
		padding:0 3px;
		font-size:12px;
	}
	.book-list .book-box .book-info .subject {
		font-size:15px;
	}
	.book-list .book-box .book-info .price {
		font-size:15px;
	}
    .book-list .book-box .book-info .price span { 
        font-size:13px;         
    }
	.book-list .book-box .book-info .book-label li {
		padding:0 7px;
		font-size:12px; line-height:17px;
	}
}
@media only screen and (max-width:480px) {
	.book-list {
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
	}
}

/* -------- 상세 -------- */
.goods-detail {
}
.goods-detail .detail-tab {
	font-size:0;
	border-top:2px solid #eee;
}
.goods-detail .detail-tab li {
	display:inline-block;
	margin-right:40px;
	vertical-align:middle;
}
.goods-detail .detail-tab li:last-child {
	margin-right:0;
}
.goods-detail .detail-tab li a {
	display:block;
	
}

/* list */
.board-movie-list {
    display:flex;
    flex-wrap:wrap;
    gap:50px 5%;
}
.board-movie-list .board-movie-box {
    width:47.5%;
}
.board-movie-list .board-movie-box .thumb {
	overflow:hidden;
	border-radius:10px;
	border:1px solid #ddd;
    aspect-ratio:1.78/1;
    height:auto;
    width:100%;
}
.board-movie-list .board-movie-box .thumb a {
	display:block;
    height:100%;
	line-height:0;
}
.board-movie-list .board-movie-box .thumb img {
	width:100%;
    height:100%;
    object-fit:cover;
    vertical-align:top;
}
.board-movie-list .board-movie-box .info a {
	display:block;
	padding-top:17px;
}
.board-movie-list .board-movie-box .info .cate {
	display:block;
	font-weight:700; font-size:16px;
	color:var(--color-primary, #0148d4);
}
.board-movie-list .board-movie-box .info .subject {
	display:block;
	margin-top:8px;
	font-weight:500; font-size:22px;
	color:var(--color-dark-gray, #333);
	word-break:break-all;
	text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
.board-movie-list .board-movie-box .info .conts {
	display:block;
	margin-top:8px;
	font-weight:500; font-size:18px;
	color:var(--color-dark-gray, #333);
	word-break:break-all;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	height:44px;
	line-height:1.2222em;
}
.board-movie-list .board-movie-box .info .date {
	display:block;
	margin-top:12px;
	font-weight:300; font-size:16px;
	color:var(--color-gray, #aaa);
}

@media only screen and (max-width:767px) {
	.board-movie-list {
        gap:30px 3.96%;
	}
	.board-movie-list .board-movie-box {
        width:48.02%
	}
	.board-movie-list .board-movie-box .info .cate {
		font-size:14px;
	}
	.board-movie-list .board-movie-box .info .subject {
		margin-top:5px;
		font-size:18px;
	}
	.board-movie-list .board-movie-box .info .conts {
		margin-top:5px;
		font-size:16px;
		height:40px;
	}
	.board-movie-list .board-movie-box .info .date {
		margin-top:8px;
		font-size:14px;
	}
}
@media only screen and (max-width:640px) {
	.board-movie-list .board-movie-box {
		width:100%;
	}
}

/* popup */
.board-popup {
	position:fixed; top:0; left:0;
	z-index:99999;
	width:100%; height:100%;
	background:rgba(0,0,0,.8);
}
.board-popup .board-popup-inner {
	position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%);
	overflow-x:hidden;
	padding:40px;
	width:100%; max-width:1180px; height:100%; max-height:900px;
	border-radius:10px;
	background:#fff;
}
.board-popup .board-popup-inner .subject {
	display:block;
	font-weight:700; font-size:24px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.board-popup .board-popup-inner .conts {
	display:block;
	margin-top:10px;
	font-weight:300; font-size:16px;
	color:var(--color-gray, #aaa);
	word-break:keep-all;
}
.board-popup .board-popup-inner .img-wrp {
	margin-top:35px;
	line-height:0;
	border:1px solid #ddd;
}
.board-popup .board-popup-inner .img-wrp img {
	max-width:100%;
}
.board-popup .board-popup-inner .img-wrp :where(iframe,object,embed) {
    position:absolute; top:0; left:0; width:100%; height:100%;
}
.board-popup .board-popup-btn {
	margin-top:40px;
	font-size:0;
	text-align:center;
}
.board-popup .board-popup-btn li {
	display:inline-block;
	margin:0 10px;
	width:260px;
	vertical-align:top;
}
.board-popup .board-popup-btn li a {
	display:block;
	border-radius:4px;
	border:1px solid var(--color-gray, #aaa);
	font-size:20px; line-height:58px;
	color:var(--color-gray, #aaa);
}
.board-popup .board-popup-btn li:first-child a {
	border-color:var(--color-primary, #0148d4);
	background:var(--color-primary, #0148d4);
	color:#fff;
}
.board-popup .close {
	position:absolute; top:37px; right:37px;
	width:42px; height:42px;
	font-size:0;
}
.board-popup .close:before,
.board-popup .close:after {
	content:'';
	position:absolute; top:50%; left:0;
	z-index:111;
	width:100%; height:2px;
	border-radius:5px;
	background:var(--color-gray, #aaa);
}
.board-popup .close:before {
	transform:rotate(45deg);
}
.board-popup .close:after {
	transform:rotate(-45deg);
}

.board-popup.border-view .board-popup-inner {
    max-width:940px;
    max-height:540px;
}
.board-popup.border-view .board-header {
    padding-bottom:36px;
	border-bottom:1px solid var(--color-dark-gray, #333);
}
.board-popup.border-view .board-header .subject {
    margin-right:50px;
}
.board-popup .board-utils {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-top:27px;
}
.board-popup .board-utils li {
    position:relative; 
	padding:0 10px;
    font-weight:300; font-size:16px;
    color:var(--color-gray, #aaa);
}
.board-popup .board-utils li + li:before {
    content:'';
    position:absolute; top:6px; left:0;
    width:1px;
    height:14px;
    background:#ddd;
}
.board-popup .board-utils .writer {
	font-weight:500;
	color:var(--color-dark-gray, #333);
}
.board-popup .writer .blue{ color:var(--color-primary, #0148d4); }
.board-popup .board-conts {
    margin-top:21px;
	font-weight:400; font-size:18px;
    line-height:1.667em;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.board-popup .attach-files { margin-top:50px; }
.board-popup .attach-files li + li { margin-top:10px; }
.board-popup .attach-files a {
    display:inline-block;
    padding:8px 13px 9px;
    font-size:16px;
	color:var(--color-dark-gray, #333);
    background:#f5f5f5;
}
.board-popup .board-popup-inner .attach-files a:hover {
    text-decoration:underline;
}
.board-popup .attach-files a img {vertical-align:middle;}
#popupMovieDetail .board-popup-inner .img-wrp {
    position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;
}

@media only screen and (max-width:1180px) {
	.board-popup .board-popup-inner,
    .board-popup.border-view .board-popup-inner {
		top:50%; left:30px;
		transform:translateY(-50%);
		max-width:calc(100% - 60px); 
		height:auto; max-height:calc(100vh - 60px);
	}
}
@media only screen and (max-width:767px) {
	.board-popup .board-popup-inner {
		padding:25px;
	}
	.board-popup .board-popup-inner .subject {
		font-size:18px;
	}
	.board-popup .board-popup-inner .conts {
		margin-top:5px;
		font-size:13px;
	}
	.board-popup .board-popup-inner .img-wrp {
		margin-top:20px;
	}
	.board-popup .board-popup-btn {
		position:relative; left:-5px;
		margin-top:25px;
		width:calc(100% + 10px);
	}
	.board-popup .board-popup-btn li {
		margin:0 5px;
		width:calc(50% - 10px);
	}
	.board-popup .board-popup-btn li a {
		font-size:14px; line-height:38px;
	}
	.board-popup .close {
		top:17px; right:17px;
		width:32px; height:32px;
	}
    .board-popup.border-view .board-header {padding-bottom:22px;}
    .board-popup .board-utils { margin-top:18px; }
    .board-popup .board-utils li { font-size:13px; }
    .board-popup .board-utils li + li:before {top:4px; height:10px;}
    .board-popup .board-conts { margin-top:18px; font-size:15px; }
    .board-popup .attach-files a {font-size:13px; }
    .board-popup.border-view .close {
        top:21px;
        right:22px;
    }
}

/* 학습운영센터
------------------------------------------------------ */
/* -------- 글쓰기 -------- */
.board-write {
	border-top:2px solid var(--color-dark-gray, #333);
}
.board-write table {
	width:100%;
}
.board-write tr {
	border-bottom:1px solid #ddd;
}
.board-write tr:last-child {
	border-bottom-color:var(--color-dark-gray, #333);
}
.board-write th ,
.board-write td {
	height:80px;
}
.board-write th {
	padding:26px 20px;
	font-weight:400; font-size:18px;
	color:var(--color-dark-gray, #333);
	text-align:left;
	vertical-align:top;
}
.board-write td {
	padding:15px 20px 15px 0;
	vertical-align:middle;
}
/* .board-write td select {
	-webkit-appearance: none;
    -moz-appearance: none;
	background:url('/html/images/sub/board/select_arrow.png') no-repeat 96% center;
}
.board-write td select::-ms-expand {
	display: none;
} */
.board-write td input[type="text"] {
	padding:0 20px;
	width:100%; height:50px;
	border:1px solid var(--color-light-gray, #ccc);
	border-radius:4px;
	font-weight:400; font-size:18px;
	color:var(--color-dark-gray, #333);
}
.board-write td .input-style1 ,
.board-write td input[type="text"].input-style1 {
	width:395px;
}
.board-write td input[type="text"].full {
	width:100%;
}
.board-write td input[type="text"].input-style2 {
	width:150px;
}
.board-write td select {
	font-weight:400; 
	/* padding:0 20px;
	width:100%; height:50px;
	border:1px solid var(--color-light-gray, #ccc);
	border-radius:4px;
	font-weight:400; font-size:18px;
	color:var(--color-dark-gray, #333);*/
} 
.board-write td .edit-wrap {
	width:100%; height:300px; padding:10px; resize:none;
	border:1px solid var(--color-light-gray, #ccc); border-radius:4px;
}
.board-write td.editor {
	font-size:18px;
}
.board-write .file-list input[type="file"] {margin-top:10px; width:100%;}
.board-write .attach-list {display:inline-block; width:100%;}
.board-write .attach-image {
    position:relative;
    padding-right:15px;
    display:inline-block;
}
.board-write .attach-image img {
    width:80px;
    cursor:pointer;
}
.board-write .attach-image .btn-delete {
    position:absolute;
    top:3px;
    right:15px;
    width:30px;
    z-index:10;
    cursor:pointer;
}
.board-write .attach-image .btn-delete img {width:100%;}
.board-write .ck-editor__editable_inline {min-height:300px;}
.board-write .checkbox-wrap {
}
.board-write .checkbox-wrap li {
	display:inline-block;
	margin-left:20px;
	vertical-align:top;
}
.board-write .checkbox-wrap li:first-child {
	margin-left:0;
}
.board-write .checkbox-wrap + input {
	margin-top:15px;
}

.board-write .period {
	font-size:0;
}
.board-write .period > * {
	display:inline-block;
	vertical-align:middle;
}
.board-write .period br {
	display:none;
}
.board-write .period .date {
	width:200px;
	background:url('/html/images/sub/board/icon_cal.png') no-repeat 90% center;
}
.board-write .period select {
	width:100px;
	background-position:88% center;
}
.board-write .period span {
	display:inline-block;
	padding:0 10px;
	font-weight:400; font-size:18px; line-height:40px;
	color:var(--color-dark-gray, #333);
	vertical-align:middle;
}
.board-write .period span:nth-of-type(2) {
	padding-right:0;
}
.board-write .period input + span {
	padding-left:20px    ;
}

.board-write .btn-file-controller {
	/* margin-top:3px;*/
	font-size:0;
    display:inline-block;
    vertical-align:top;
}
.board-write .btn-file-controller li {
	display:inline-block;
	margin-right:-1px;
	vertical-align:top;
}
.board-write .btn-file-controller li button {
	position:relative;
	width:40px; height:24px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
	background:#fff;
}
.board-write .btn-file-controller li button:before {
	content:'';
	position:absolute; top:50%; left:50%;
	margin-top:-1px; margin-left:-5px;
	width:10px; height:2px;
	background:#000;
}
.board-write .btn-file-controller li .add:after {
	content:'';
	position:absolute; top:50%; left:50%;
	margin-top:-5px; margin-left:-1px;
	width:2px; height:10px;
	background:#000;
}
.board-write .btn-file-controller li button:disabled:before,
.board-write .btn-file-controller li button:disabled:after {
	background:#ddd !important;
}

.board-write .movie-info {
	margin-top:15px;
	font-weight:300; font-size:14px;
	color:var(--color-dark-gray, #333);
}
.board-write .movie-info strong {
	font-weight:300;
	color:var(--color-red, #dc3545);
}
.board-write .movie-info span {
	color:#779df5;
}

.board-write .terms-box {
    overflow-x:hidden;
    padding:15px 20px;
    width:100%;
    height:180px;
    border:1px solid var(--color-light-gray, #ccc);
    border-radius:4px;
}
.board-write .star-rate-box {display:flex;}
.board-write td input[type="text"] + .checkbox-wrap {
    display:inline-block;
    margin-left:10px;
}
.board-write .row-box + .row-box {margin-top:10px;}
.board-write .btn-refresh {
    display:inline-block;
    width:25px;
    margin-top:12px;
    vertical-align:top;
}
.board-write img {
    vertical-align:top;
}
.board-write .btn-refresh img {
    width:100%;
}

.board-write .board-btn {margin-top:60px;}
.board-btn {
    display:flex;
    justify-content:center;
    gap:0 10px;
}
.board-btn li {
	/* margin:0 5px; */
	width:160px;
}
.board-btn li a {display:block;}

@media only screen and (max-width:1180px) {
	.board-write .period {
		padding-top:10px; padding-bottom:10px;
	}
	.board-write .period > * {
		margin:5px 0;
	}
	.board-write .period br {
		display:block;
	}
	.board-write .period span:nth-of-type(3) {
		display:none;
	}
}
@media only screen and (max-width:767px) {
	.board-write colgroup {
		display:none;
	}
	.board-write :is(th,td) {
		height:auto;
	}
	.board-write th {
		display:block;
		padding:15px 0 7px;
		width:100%;
		font-size:15px;
	}
	.board-write .btn-file-controller {
		position:relative; top:-1px;
		display:inline-block;
		margin-top:0; margin-left:5px;
		vertical-align:middle;
	}
	.board-write td {
		display:block;
		padding:0 0 15px;
		width:100%;
	}
	.board-write td select {
		background-position:96% center;
		background-size:auto 6px;
	}
	.board-write td :is(.input-style1, input[type="text"].input-style1) {
		width:100%;
	}
	.board-write td :is(input[type="text"],select) {
		padding:0 10px;
		height:40px;
		font-size:15px;
	}
	.board-write .checkbox-wrap + input {
		margin-top:5px;
	}
	.board-write .movie-info {
		margin-top:7px;
		font-size:12px;
	}
	.attach-list li ,
	.select-file span {
		margin-bottom:5px;
		font-size:14px; line-height:20px;
	}
	.select-file span {
		margin-bottom:0;
	}
	.select-file label,
	.attach-list li strong {
		margin-right:7px;
		padding:0 7px;
		font-size:11px; line-height:20px;
	}
	.board-write .period span {
		padding:0 8px;
		font-size:15px; line-height:35px;
	}
	.board-write .period input + span {
		padding-left:8px;
	}
	.board-write .period .date {
		width:120px;
		background-size:auto 15px;
	}
	.board-write .period select {
		width:70px;
	}
	.board-write td.editor {
		font-size:15px;
	}

	.board-write .write-form-btn {
		margin-top:30px;
        justify-content:space-between;
	}
	.board-write .write-form-btn li {
		width:calc(50% - 5px);
        margin:0;
	}

	.board-write .board-btn {margin-top:30px;}
	.board-btn {justify-content:space-between;}
	.board-btn li {
        flex-grow:1;
	}
}

/* -------- 게시판목록 -------- */
.board-list { 
	font-size:0;
}
.board-list .board-box { 
}
.board-list .thumb { 
	overflow:hidden;
	width:100%;
	border-radius:4px;
	border:1px solid #ddd;
	line-height:0;
}
.board-list .thumb img { 
	width:100%; 
}
.board-list .board-conts-wrap { 
	margin-top:20px; 
}
.board-list .board-conts-header { 
	margin-bottom:10px;
	font-size:0; 
}
.board-list .board-conts-header li { 
	display:inline-block;
	width:50%;
	font-size:16px;
	vertical-align:middle;
}
.board-list .board-conts-header .cate { 
	font-weight:700;
	color:var(--color-primary, #0148d4);
}
.board-list .board-conts-header .hit { 
	font-weight:300;
	color:var(--color-gray, #aaa);
	text-align:right;
}
.board-list .board-conts a { 
	display:block; 
}
.board-list .board-conts .subject { 
	overflow:hidden;
	display:block;
	width:100%;
	font-weight:500; font-size:18px;
	color:var(--color-dark-gray, #333);
	text-overflow:ellipsis;
	white-space:nowrap;
}
.board-list .board-conts .subject a {
	display:block;
}
.board-list .board-conts .conts {
	overflow:hidden;
	display:block;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:5;
	-webkit-box-orient:vertical;
	margin:10px 0;
	height:120px;
	font-size:16px; line-height:24px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.board-list .date { 
	font-weight:300; font-size:16px;
	color:var(--color-gray, #aaa);
}
.board-list .board-utils { 
	margin-top:15px;
	font-size:0;
}
.board-list .board-utils li { 
	display:inline-block;
	width:50%;
	vertical-align:middle;
}
.board-list .board-utils .name { 
	font-weight:500; font-size:18px; line-height:40px;
	color:var(--color-dark-gray, #333);
}
.board-list .board-utils .name img { 
	display:inline-block;
	margin-right:10px;
	vertical-align:top;
}
.board-list .grade { 
	text-align:right;
}
.board-list .grade .grade-wrap { 
	display:inline-block; 
	width:96px; height:16px;
	background:url('/html/images/sub/board/grade.png') no-repeat left center;
	text-align:left;
	vertical-align:middle;
}
.board-list .grade .grade-wrap span { 
	display:inline-block; 
	height:16px;
	background:url('/html/images/sub/board/grade_on.png') no-repeat left center;
	vertical-align:top;
}
/* type1 */
.board-type1 { 
	position:relative; left:-25px;
	margin-bottom:-50px;
	width:calc(100% + 50px);
}
.board-type1 .board-box { 
	display:inline-block;
	margin-bottom:50px;
	padding:0 25px;
	width:33.333%;
	vertical-align:top;
}
/* type2 */
.board-type2 {  
}
.board-type2 .board-box { 
	margin-bottom:50px;
}
.board-type2 .board-box .thumb { 
	display:inline-block;
	width:360px;
	vertical-align:middle;
    aspect-ratio:12/7.1;
}
.board-type2 .board-box .thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.board-type2 .board-box .board-conts-wrap { 
	display:inline-block;
	margin-top:0;
	padding-left:5%;
	width:calc(100% - 360px); 
	vertical-align:middle;
}
.board-type2 .board-conts .conts { 
	-webkit-line-clamp:2;
	height:48px;
}
.board-type2 .board-utils { 
	margin-top:10px; 
}
/* type3 */
.board-type3 { 
	width:100%;
	border-top:2px solid var(--color-dark-gray, #333);
	border-bottom:1px solid var(--color-dark-gray, #333);
	table-layout:fixed;
}
.board-type3 td { 
	padding:26px 10px;
	font-size:16px; 
	color:var(--color-dark-gray, #333);
	text-align:center;
}
.board-type3 .tit { 
	border-top:1px solid var(--color-dark-gray, #333); 
}
.board-type3 .cate { 
	padding-left:20px; padding-right:20px;
	color:var(--color-primary, #0148d4);
	text-align:left;
}
.board-type3 .number { 
	color:var(--color-primary, #0148d4);
	text-align:center;
}
.board-type3 .subject { 
	max-width:100%;
	text-align:left;
}
.board-type3 .subject a {
	display:inline-block;
	font-size:0;
	display:flex;
	align-items:center;
}
.board-type3 .subject a div {
	display:inline-block;
	overflow:hidden;
	max-width:100%;
	font-weight:500;
	font-size:18px;
	text-overflow:ellipsis;
	white-space:nowrap;
	vertical-align:middle;
}
.board-type3 .subject.has a div {
	max-width:calc(100% - 97px);
}
.board-type3 .subject .cate {
	padding:0;
    margin-right:10px;
    display:inline-block;
    font-weight:400;
    font-size:16px;
	flex-shrink:0;
}
.board-type3 .board-icon { 
	display:inline-block;
	margin-left:10px;
	font-size:0;
	vertical-align:middle;
	flex-shrink:0;
}
.board-type3 .board-icon li { 
	display:inline-block;
	margin-left:10px;
	vertical-align:middle;
}
.board-type3 .board-icon li:first-child { 
	margin-left:0; 
}
.board-type3 .grade { 
	padding-left:0; padding-right:0;
}
.board-type3 .name { 
	font-weight:700;
	font-size:18px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}
.board-type3 .date { 
	font-weight:300;
	color:var(--color-gray, #aaa); 
}
.board-type3 .hit { 
	font-weight:300;
}
.board-type3 .conts { 
	display:none;
	border-top:1px solid #ddd;
}
.board-type3 .tit.on + .conts {
	display:table-row;
}
.board-type3 .conts td { 
	padding:20px;
	height:125px;
	text-align:left;
}

@media only screen and (max-width:850px) {
	.board-type1 .board-box {
		width:50%;
	}

	.board-type3 {
		display:block;
		width:100%;
	}
	.board-type3 colgroup {
		display:none;
	}
	.board-type3 tbody {
		display:block;
		width:100%;
	}
	.board-type3 tr {
		display:block;
		padding:14px 0 16px;
	}
	.board-type3 .conts {
		padding:0;
	}
	.board-type3 td {
		padding:0 20px 0 0;
		display:inline-block;
	}
	.board-type3 .cate {
		padding-left:0; padding-right:0;
	}
	.board-type3 .subject {
		margin-bottom:7px;
		width:100%;
	}
	.board-type3 .grade {
		padding-right:20px;
	}	
	.board-type3 .hit {
		padding-right:0;
	}
	.board-type3 .conts td {
		padding-left:0; padding-right:0;
	}
	.board-type3 .tit.on + .conts {
		display:block;
	}
}
@media only screen and (max-width:767px) {
    .board-type1 {
		left:-10px;
		width:calc(100% + 20px);
	}
	.board-type1 .board-box {
		padding:0 15px;
	}
	.board-list .board-conts-wrap {
		margin-top:15px;
	}
	.board-list .board-conts-header {
		margin-bottom:6px;
	}
	.board-list .board-conts-header li {
		font-size:14px;
	}
	.board-list .board-conts .subject {
		font-size:16px;
	}
	.board-list .board-conts .conts {
		margin:7px 0;
		height:100px;
		font-size:14px; line-height:20px;
	}
	.board-list .date {
		font-size:14px;
	}
	.board-list .board-utils {
		margin-top:10px;
	}
	.board-list .board-utils .name {
		font-size:16px; line-height:30px;
	}
	.board-list .board-utils .name img {
		margin-right:7px;
		width:30px;
	}
	.board-list .grade .grade-wrap {
		width:72px; height:12px;
		background-size:auto 100%;
	}
	.board-list .grade .grade-wrap span {
		height:12px;
		background-size:auto 100%;
	}

	.board-type2 .board-box .thumb ,
	.board-type2 .board-box .board-conts-wrap {
		width:50%;
	}

	.board-type3 td {
		padding:0 12px 0 0;
		font-size:14px;
	}
	.board-type3 .cate {
		font-size:14px;
	}
	.board-type3 .subject {
		margin-bottom:5px;
	}
	.board-type3 .subject a div {
		font-size:15px;
	}
	.board-type3 .subject.has a div {
		max-width:calc(100% - 79px);
	}
	.board-type3 .subject .cate {
		font-size:14px;
		margin-right:6px;
	}
	.board-type3 .name {
		font-size:16px;
	}
	.board-type3 .conts td {
		height:auto;
	}
	.board-type3 .board-icon {
		margin-left:15px;
	}
	.board-type3 .board-icon li img {
		height:15px;
	}
}
@media only screen and (max-width:640px) {
	.board-type1 {
		margin-bottom:-30px;
	}
	.board-type1 .board-box {
		margin-bottom:30px;
		width:100%;
	}

	.board-type2 .board-box {
		margin-bottom:30px;
	}
	.board-type2 .board-box .thumb ,
	.board-type2 .board-box .board-conts-wrap {
		width:100%;
	}
	.board-type2 .board-box .board-conts-wrap {
		margin-top:15px;
		padding-left:0;
	}
}


/* popup */
.popup-wrap, .photo-review-detail-popup, .board-popup {
	display:none;
}
.popup-wrap.secret .popup-inner {
	max-height:590px;
}
.popup-wrap .secret-wrap {
	margin-top:40px;
	padding-top:40px;
	border-top:1px solid var(--color-light-gray, #ccc);
	text-align:center;
}
.popup-wrap .secret-wrap .icon {
	margin:0 auto;
	width:120px; height:120px;
	border-radius:50%;
	border:2px solid #eee;
	background:url('/html/images/sub/board/icon_lock_b.png') no-repeat center center;
}
.popup-wrap .secret-wrap .txt {
	margin:35px 0 15px;
	font-size:18px; line-height:30px;
	color:var(--color-dark-gray, #333);
}
.popup-wrap .secret-wrap input[type="password"] {
	width:100%; height:50px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
	font-size:18px;
	color:var(--color-dark-gray, #333);
	text-align:center;
}
.popup-wrap.secret .error-txt {
	display:block;
	margin-top:10px; margin-bottom:-30px;
	font-size:12px; line-height:16px;
	color:#ff8e20;
	text-align:left;
	vertical-align:middle;
}
.popup-wrap.secret .error-txt img {
	display:inline-block;
	margin-right:6px;
	vertical-align:middle;
}
.popup-wrap .board-write {
	border-top:1px solid var(--color-light-gray, #ccc);
}
.popup-wrap .board-write tr:last-child {
	border-bottom-color:var(--color-light-gray, #ccc);
}

@media only screen and (max-width:767px) {
	.popup-wrap .secret-wrap {
		margin-top:30px; padding-top:30px;
	}
	.popup-wrap.secret .popup-inner {
		max-height:calc(100% - 60px);
	}
	.popup-wrap .secret-wrap .icon {
		width:80px; height:80px;
		background-size:auto 20px;
	}
	.popup-wrap .secret-wrap .txt {
		margin:20px 0 10px;
		font-size:13px; line-height:18px;
	}
	.popup-wrap .secret-wrap input[type="password"] {
		height:40px;
		font-size:15px;
	}
	.popup-wrap.secret .error-txt {
		margin-bottom:-10px;
	}
}

/* -------- 게시물 상세 -------- */
.board-view .board-utils {
	font-size:0;
}
.board-view .board-utils > * {
	display:inline-block;
	vertical-align:middle;
}
.board-view .board-utils .cate {
	width:calc(100% - 300px);
	font-weight:700; font-size:16px;
	color:var(--color-primary, #0148d4);
}
.board-view .board-utils ul {
	width:300px;
	font-size:0;
	text-align:right;
}
.board-view .board-utils ul li {
	position:relative;
	display:inline-block;
	padding:0 20px;
    font-weight:300; font-size:16px;
	color:var(--color-dark-gray, #333);
	vertical-align:middle;
}
.board-view .board-utils ul li:last-child {
	padding-right:0;
}
.board-view .board-utils ul li:before {
	content:'';
	position:absolute; top:50%; left:0;
	margin-top:-7px;
	width:1px; height:14px;
	background:#ddd;
}
.board-view .board-utils ul li:first-child:before {
	display:none;
}
.board-view .board-utils ul .date {
	color:var(--color-gray, #aaa);
}
.board-view .subject {
	margin:15px 0 50px;
	font-weight:700; font-size:24px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}

.board-view .user {
	margin-bottom:30px;
	font-size:0;
}
.board-view .grade {
	display:inline-block;
	margin-right:20px;
	vertical-align:middle;
}
.board-view .grade .grade-wrap { 
	display:inline-block; 
	width:96px; height:16px;
	background:url('/html/images/sub/board/grade.png') no-repeat left center;
	text-align:left;
	vertical-align:middle;
}
.board-view .grade .grade-wrap span { 
	display:inline-block; 
	height:16px;
	background:url('/html/images/sub/board/grade_on.png') no-repeat left center;
	vertical-align:top;
}
.board-view .user .name {
	display:inline-block;
	font-weight:700; font-size:18px; line-height:40px;
	color:var(--color-dark-gray, #333);
	vertical-align:middle;
}
.board-view .user .name img {
	display:inline-block;
	margin-right:10px;
	vertical-align:top;
}

.board-view .board-conts {
}
.board-view .board-conts .img-file {
	margin-bottom:30px;
    text-align:center;
}
.board-view .board-conts .img-file img {
	max-width:100%;
	/* border:1px solid #ddd; */
}
.board-view .board-conts p {
	font-size:18px; line-height:1.6;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.board-view .board-conts .file-list {
    margin-top:30px;
}
.board-view .board-conts .file-list li {
    padding:2px 0;
}
.board-view .board-conts .file-list a:hover {
    text-decoration:underline;
}

.board-navi {
	margin-top:20px;
	border-top:1px solid var(--color-dark-gray, #333);
	border-bottom:1px solid var(--color-dark-gray, #333);
	font-size:0;
}
.board-navi li {
	display:block;
	padding:0 20px;
}
.board-navi li.next {
	border-top:1px solid #ddd;
}
.board-navi li > * {
	display:inline-block;
	font-size:18px; line-height:60px;
	vertical-align:middle;
}
.board-navi li strong {
	width:160px;
	font-weight:400;
}
.board-navi li strong + * {
	width:calc(100% - 160px);
}
.board-navi li .off,
.board-navi li span {
	color:var(--color-gray, #aaa);
}
.board-navi li a {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.board-navi li a:hover {
	text-decoration:underline;
}
.board-navi li a img {
    margin-left:5px;
    vertical-align:middle;
}

.board-view .board-btn {
	margin-top:80px;
}

/* comment */
.comment-wrap {
	margin-top:40px;
}
.comment-wrap .comment-form {
	padding:40px 20px 30px;
	background:#f5f5f7;
}
.comment-wrap .comment-form fieldset {
	font-size:0;
}
.comment-wrap .comment-form input {
	display:inline-block;
	padding:0 20px;
	width:150px; height:50px;
	border:1px solid var(--color-light-gray, #ccc);
	background:#fff;
	font-size:16px;
	color:var(--color-dark-gray, #333);
	vertical-align:top;
}
.comment-wrap .comment-form input::placeholder {
	color:var(--color-gray, #aaa);
}
.comment-wrap .comment-form .comment-input {
    width:100%;
}
.comment-wrap .comment-form .comment-input input {
    width:calc(100% - 120px);
}
.comment-wrap .comment-form input + input,
.comment-wrap .comment-form img + input {margin-left:5px;}
.comment-wrap .comment-form button {
	display:inline-block;
	width:120px; height:50px;
	border:0 none;
	background:var(--color-dark-gray, #333);
	font-weight:500; font-size:18px;
	color:#fff;
	text-align:center;
	vertical-align:top;
}
/* .comment-wrap .comment-form .comment-box + .comment-box {margin-top:5px;} */
.comment-form .comment-area {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:5px;
}

.comment-list {
	border-bottom:1px solid var(--color-light-gray, #ccc);
}
.comment-box-wrap {
	padding:20px;
	border-top:1px solid var(--color-light-gray, #ccc);	
}
.comment-box-wrap .comment-box {
	font-size:16px;
}
.comment-box-wrap .comment-box .comment-header {
	margin-bottom:10px;
	font-size:0;
}
.comment-box-wrap .comment-box .comment-header > * {
	display:inline-block;
	font-weight:500; font-size:16px;
	word-break:keep-all;
	vertical-align:middle;
}
.comment-box-wrap .comment-box .comment-header .name {
	width:calc(100% - 180px);
	color:var(--color-dark-gray, #333);
}
.comment-box-wrap .comment-box .comment-header .modify {
	width:180px;
	color:var(--color-gray, #aaa);
	text-align:right;
}
.comment-box-wrap .comment-box .comment-header .modify li { 
	position:relative;
	display:inline-block;
	padding:0 11px;
	vertical-align:middle;
}
.comment-box-wrap .comment-box .comment-header .modify li:last-child {
	padding-right:0;
}
.comment-box-wrap .comment-box .comment-header .modify li:after { 
	content:'';
	position:absolute; top:50%; right:0;
	margin-top:-7px;
	width:1px; height:14px;
	background:#ddd;
}
.comment-box-wrap .comment-box .comment-header .modify li:last-child:after { 
	display:none; 
}
.comment-box-wrap .comment-box .comment-header .modify li a { 
	display:block;
	font-weight:500; font-size:16px; 
	color:var(--color-gray, #aaa);
}
.comment-box-wrap .comment-box .comment-header .modify li:hover a {
	text-decoration:underline;
}
.comment-box-wrap .comment-box .comment-conts {
	word-break:keep-all;
}
.comment-box-wrap .comment-box .date {
	margin-top:15px;
	font-size:14px;
	color:var(--color-gray, #aaa);
}

.comment-box-wrap .comment-reply {
	margin-top:20px;
	padding:20px;
	border:1px solid var(--color-light-gray, #ccc);
}
.comment-box-wrap .comment-reply .comment-header .name:before {
	content:'';
	position:relative; top:-1px;
	display:inline-block;
	margin-right:10px;
	width:15px; height:10px;
	background:url('/html/images/sub/board/reply.png') no-repeat left top;
	vertical-align:middle;
}

.comment-list .comment-form {
	margin-top:20px;
	border:1px solid var(--color-light-gray, #ccc);
}

@media only screen and (max-width:767px) {
	.board-view .board-utils .cate {
		font-size:14px;
        width:calc(100% - 200px)
	}
    .board-view .board-utils ul {width:200px;}
	.board-view .board-utils ul li {
		padding:0 10px;
		font-size:14px;
	}
	.board-view .board-utils ul li:before {
		margin-top:-5px;
		height:10px;
	}
	.board-view .subject {
		margin:12px 0 20px;
		font-size:18px;
	}
	.board-view .board-conts .img-file {
		margin-bottom:15px;
	}
	.board-view .board-conts p {
		font-size:15px;
	}
	.board-view .user {
		margin-bottom:20px;
	}
	.board-view .grade {
		margin-right:10px;
	}
	.board-view .grade .grade-wrap {
		width:72px; height:12px;
		background-size:auto 100%;
	}
	.board-view .grade .grade-wrap span {
		height:12px;
		background-size:auto 100%;
	}
	.board-view .user .name {
		font-size:15px; line-height:30px;
	}
	.board-view .user .name img {
		margin-right:7px;
		width:30px;
	}

	.board-navi {
		margin-top:15px;
	}
	.board-navi li {
		padding:0 15px;
	}
	.board-navi li > * {
		font-size:14px; line-height:45px;
	}
	.board-navi li strong {
		width:55px;
	}
	.board-navi li strong + * {
		width:calc(100% - 55px);
	}

	.comment-wrap {
		margin-top:25px;
	}
	.comment-wrap .comment-form {
		padding:20px 12px 15px;
	}
	.comment-wrap .comment-form input {
		padding:0 10px;
		height:42px;
		font-size:13px;
	}
    .comment-wrap .comment-form .comment-input input {
        width:calc(100% - 40px);
    }
	.comment-wrap .comment-form button {
		width:40px; height:42px;
		font-size:12px; line-height:1.2;
	}
	.comment-form .comment-box {flex-grow:1;}
	.comment-form .comment-box img {
        height:42px;
    }

	.comment-box-wrap .comment-box-wrap {
		padding:15px;
	}
	.comment-box-wrap .comment-box {
		font-size:14px;
	}
	.comment-box-wrap .comment-box .comment-header .name {
		font-size:14px;
	}
	.comment-box-wrap .comment-box .comment-header .modify li {
		padding:0 7px;
	}
	.comment-box-wrap .comment-box .comment-header .modify li:after {
		margin-top:-5px;
		height:10px;
	}
	.comment-box-wrap .comment-box .comment-header .modify li a {
		font-size:14px;
	}
	.comment-box-wrap .comment-box .date {
		margin-top:10px;
		font-size:12px;
	}
	.comment-box-wrap .comment-reply {
		margin-top:15px;
		padding:15px;
	}
	.comment-box-wrap .comment-box .comment-header {
		margin-bottom:5px;
	}
	.comment-box-wrap .comment-reply .comment-header .name:before {
		margin-right:5px;
		background-size:auto 8px;
	}
	.comment-box-wrap .comment-form {
		margin-top:15px;
	}

	.board-view-btn {
		margin-top:50px;
	}
}
@media only screen and (max-width:640px) {
	.comment-wrap .comment-form input {
        width:100%;
    }
	.comment-wrap .comment-form input + input,
	.comment-wrap .comment-form img + input {margin-left:0; margin-top:5px;}

    .board-view .board-btn {
		margin-top:30px;
	}
}

/* -------- FAQ -------- */
.faq-wrap { 
	border-top:2px solid var(--color-dark-gray, #333);	 
}
.faq-wrap .f-box { 
	position:relative;
	display:table;
	padding:0 100px 0 20px;
	width:100%; height:80px;
	border-bottom:1px solid var(--color-dark-gray, #333);
}
.faq-wrap .f-box.on { 
	border-bottom-color:#ddd; 
}
.faq-wrap .f-box:before,
.faq-wrap .f-box:after { 
	content:'';
	position:absolute; top:50%; right:20px;
	width:14px; height:2px;
	background:#000;
	transition:.3s;
}
.faq-wrap .f-box:after { 
	transform:rotate(-90deg); 
}
.faq-wrap .f-box.on:after { 
	display:none; 
}
.faq-wrap .f-box > * { 
	display:table-cell;
	vertical-align:middle;
}
.faq-wrap .f-box .cate { 
	width:175px;
	font-size:16px;
	color:var(--color-primary, #0148d4);
	text-align:left;
}
.faq-wrap .f-box .subject { 
	font-weight:500; font-size:18px;
	color:var(--color-dark-gray, #333);
	text-align:left;
	word-break:keep-all;
}
.faq-wrap .f-box .name { 
	width:85px;
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
	text-align:left;
}
.faq-wrap .f-box .date { 
	width:85px;
	font-weight:300; font-size:16px;
	color:var(--color-gray, #aaa);
	letter-spacing:-1px;
	text-align:right;
}
.faq-wrap .q-box { 
	display:none;
	padding:20px;
	min-height:120px;
	border-bottom:1px solid var(--color-dark-gray, #333);
}
.faq-wrap .q-box p { 
	font-size:16px; line-height:1.5;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}

@media only screen and (max-width:767px) {
	.faq-wrap .f-box {
		display:block;
		padding:15px 50px 15px 15px;
		height:auto;
	}
	.faq-wrap .f-box > * {
		display:inline-block;
	}
	.faq-wrap .f-box .cate {
		width:100%;
		font-size:14px;
	}
	.faq-wrap .f-box .subject {
        display:block;
		margin:5px 0 10px;
		font-size:15px;
	}
	.faq-wrap .f-box .name {
		margin-right:15px;
		width:auto;
		font-size:15px;
	}
	.faq-wrap .f-box .date {
		width:auto;
		font-size:14px;
		text-align:left;
	}
	.faq-wrap .q-box {
		padding:15px;
		min-height:auto;
	}
	.faq-wrap .q-box p {
		font-size:13px;
	}
	.faq-wrap .f-box:before,
	.faq-wrap .f-box:after {
		right:15px;
		width:10px;
	}
}

/* -------- 이벤트 -------- */
.board-category { 
	margin-bottom:40px;
	font-size:0; 
}
.board-category .swiper-slide { 
	display:inline-block;
	margin-left:15px;
	width:auto;
	vertical-align:top;
}
.board-category .swiper-slide:first-child { 
	margin-left:0; 
}
.board-category .swiper-slide a { 
	display:block; 
	font-size:16px;
	color:var(--color-dark-gray, #333);
    padding:9px 20px;
    background:#eee;
    border-radius:20px;
}
.board-category .swiper-slide.on a { 
	font-weight:500;
    color:#fff;
	background:var(--color-primary, #0148d4);
}

@media only screen and (max-width:1300px) {
	.board-category {
		width:calc(100% + 30px);
        overflow:hidden;
	}
}
@media only screen and (max-width:768px) {
	.board-category {
		width:calc(100% + 20px);
	}
}
@media only screen and (max-width:767px) {
	.board-category .swiper-slide {
		margin-left:10px;
	}
	.board-category .swiper-slide a {
		font-size:14px;
        padding:8px 15px;
	}
}

/* list */
.event-list { 
    display:flex;
    flex-wrap:wrap;
    gap:50px 5%;
}
.event-list .event-box { 
    width:47.5%;
}
.event-list .event-box .thumb { 
	position:relative;
    aspect-ratio:1.78/1;
}
.event-list .event-box .thumb a { 
	overflow:hidden;
	display:block;
	border:1px solid #ddd;
	border-radius:10px;
}
.event-list .event-box .thumb a > img { 
	width:100%; 
    height:100%;
    object-fit:cover;
    vertical-align:top;
}
.event-list .event-box .thumb .event-label { 
	position:absolute; top:10px; left:10px;
	width:64px;
	border-radius:4px;
	background:#fff;
	font-weight:700; font-size:14px; line-height:30px;
	color:var(--color-dark-gray, #333);
	text-align:center;
}
.event-list .event-box .event-info a { 
	display:block; 
}
.event-list .event-box .event-info .cate { 
	display:block;
	margin-top:12px;
	font-weight:700; font-size:16px;
	color:var(--color-primary, #0148d4);
}
.event-list .event-box .event-info .subject { 
	display:block;
	margin-top:12px;
	font-weight:500; font-size:22px;
	color:var(--color-dark-gray, #333);
    text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
.event-list .event-box .event-info .word { 
	display:block;
	margin-top:12px;
	font-size:18px;
	color:var(--color-dark-gray, #333);
	word-break:break-all;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	height:44px;
	line-height:1.2222em;
}
.event-list .event-box .date-wrap { 
	margin-top:12px;
	font-size:0;
}
.event-list .event-box .date-wrap li { 
	display:inline-block;
	margin-left:23px;
	vertical-align:middle;
}
.event-list .event-box .date-wrap .d-day { 
	margin-left:0; 
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
}
.event-list .event-box .date-wrap .date { 
	font-weight:300; font-size:16px;
	color:var(--color-gray, #aaa);
}

.event-list .event-box.end .thumb:before { 
	content:'';
	position:absolute; top:0; left:0;
	width:100%; height:100%;
	border-radius:10px;
	background:rgba(0,0,0,.5);
}
.event-list .event-box.end .event-label { 
	background:var(--color-gray, #aaa);
	color:#fff;
}

@media only screen and (max-width:767px) {
	.event-list {
        gap:30px 3.96%;
	}
	.event-list .event-box {
        width:48.02%
	}
	.event-list .event-box .thumb {
		border-radius:7px;
	}
	.event-list .event-box .thumb .event-label {
		width:56px;
		font-size:14px; line-height:25px;
	}
	.event-list .event-box .event-info .cate {
		font-size:14px;
	}
	.event-list .event-box .event-info .subject {
		margin-top:8px;
		font-size:18px;
	}
	.event-list .event-box .event-info .word {
		margin-top:7px;
		font-size:16px;
		height:40px;
	}
	.event-list .event-box .date-wrap {
		margin-top:8px;
	}
	.event-list .event-box .date-wrap li {
		margin-left:15px;
	}
	.event-list .event-box .date-wrap .d-day {
		font-size:16px;
	}
	.event-list .event-box .date-wrap .date {
		font-size:14px;
	}
}
@media only screen and (max-width:640px) {
	.event-list .event-box {
		width:100%;
	}
}

/* list */
.gallery-board-list { 
    display:flex;
    flex-wrap:wrap;
    gap:50px 5%;
}
.gallery-box { 
    width:47.5%;
}
.gallery-box .thumb { 
	position:relative;
    aspect-ratio:1.7884/1;
}
.gallery-box .thumb a { 
	overflow:hidden;
	display:block;
	border:1px solid #ddd;
	border-radius:10px;
	height:100%;
}
.gallery-box .thumb a > img { 
	width:100%; 
    height:100%;
    object-fit:cover;
    vertical-align:top;
}
.gallery-box .thumb .board-label { 
	position:absolute; top:10px; left:10px;
	width:64px;
	border-radius:4px;
	background:#fff;
	font-weight:700; font-size:14px; line-height:30px;
	color:var(--color-dark-gray, #333);
	text-align:center;
}
.gallery-box .board-info a { 
	display:block; 
}
.gallery-box .board-info .cate { 
	display:block;
	margin-top:12px;
	font-weight:700; font-size:16px;
	color:var(--color-primary, #0148d4);
}
.gallery-box .board-info .subject { 
	display:block;
	margin-top:12px;
	font-weight:500; font-size:22px;
	color:var(--color-dark-gray, #333);
	word-break:break-all;
    text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
.gallery-box .board-info .conts { 
	display:block;
	margin-top:12px;
	font-size:18px;
	color:var(--color-dark-gray, #333);
	word-break:break-all;
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	height:44px;
	line-height:1.2222em;
}
.gallery-box .date-wrap { 
	margin-top:12px;
	font-size:0;
}
.gallery-box .date-wrap li { 
	display:inline-block;
	vertical-align:middle;
}
.gallery-box .date-wrap li + li {
	margin-left:23px;
}
.gallery-box .date-wrap .d-day { 
	margin-left:0; 
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
}
.gallery-box .date-wrap .date { 
	font-weight:300; font-size:16px;
	color:var(--color-gray, #aaa);
}
.gallery-box.end .thumb:before { 
	content:'';
	position:absolute; top:0; left:0;
	width:100%; height:100%;
	border-radius:10px;
	background:rgba(0,0,0,.5);
}
.gallery-box.end .board-label { 
	background:var(--color-gray, #aaa);
	color:#fff;
}

@media only screen and (max-width:767px) {
	.gallery-board-list {
        gap:30px 3.96%;
	}
	.gallery-box {
        width:48.02%
	}
	.gallery-box .thumb {
		border-radius:7px;
	}
	.gallery-box .thumb .board-label {
		width:56px;
		font-size:14px; line-height:25px;
	}
	.gallery-box .board-info .cate {
		font-size:14px;
	}
	.gallery-box .board-info .subject {
		margin-top:8px;
		font-size:18px;
	}
	.gallery-box .board-info .conts {
		margin-top:7px;
		font-size:16px;
		height:40px;
	}
	.gallery-box .date-wrap {
		margin-top:8px;
	}
	.gallery-box .date-wrap li {
		margin-left:15px;
	}
	.gallery-box .date-wrap .d-day {
		font-size:16px;
	}
	.gallery-box .date-wrap .date {
		font-size:14px;
	}
}
@media only screen and (max-width:640px) {
	.gallery-box {
		width:100%;
	}
}

/* 마이페이지
------------------------------------------------------ */
.mypage-wrap { 
    display:flex; 
}
/* -------- 레이아웃 -------- */
/* left */
.mypage-wrap .mypage-menu-wrap { 
	width:240px;
    flex-shrink:0;
}
.mypage-wrap .user-info h1 { 
	font-weight:400; font-size:36px; line-height:1;
	color:var(--color-dark-gray, #333);
}
.mypage-wrap .user-info h1 strong { 
	font-weight:700;
}
.mypage-wrap .user-info p { 
	margin-top:10px;	 
}
.mypage-wrap .user-info p a { 
	position:relative;
	display:inline-block;
	padding:3px 0;
	font-size:16px;
	color:var(--color-gray, #aaa);
}
.mypage-wrap .user-info p a:after { 
	content:'';
	display:block;
	width:100%; height:1px;
	background:var(--color-gray, #aaa);
}
.mypage-wrap .maypage-menu h1 { 
	margin:53px 0 19px;
	font-weight:700; font-size:22px; line-height:1;
	color:#000;
}
.mypage-wrap .maypage-menu ul li a { 
	display:block;
	font-size:18px; line-height:36px;
	color:var(--color-dark-gray, #333);
	transition:.3s;
}
.mypage-wrap .maypage-menu ul li:hover a,
.mypage-wrap .maypage-menu ul li.on a { 
	font-weight:500;
	color:var(--color-primary, #0148d4); 
}

/* conts */
.mypage-wrap .mypage-conts { 
	width:calc(100% - 240px);
}
.mypage-wrap .mypage-conts-header { 
    display:flex;
	margin-bottom:60px;
	padding:20px;
	border-radius:4px;
	background:#f8f8f8; 
}
.mypage-wrap .mypage-conts-header dl { 
	margin-left:20px; padding:20px;
	background:#fff;
	box-shadow:0 0 10px rgba(0,0,0,.05);
	vertical-align:top;
}
.mypage-wrap .mypage-conts-header dl:nth-of-type(1) { 
	margin-left:0;
	width:calc(100% - 460px);	 
}
.mypage-wrap .mypage-conts-header dl:nth-of-type(2) { 
	width:220px;
}
.mypage-wrap .mypage-conts-header dl:nth-of-type(3) { 
	width:200px;
}
.mypage-wrap .mypage-conts-header dl dt { 
	font-weight:300; font-size:16px; line-height:1;
	color:var(--color-dark-gray, #333);
}
.mypage-wrap .mypage-conts-header dl dd { 
	margin-top:25px; 
	font-weight:700; font-size:24px; line-height:1;
	color:var(--color-dark-gray, #333);
}

.mypage-wrap .mypage-conts-tit { 
	margin-bottom:40px;
	font-weight:700; font-size:24px; line-height:1;
	color:var(--color-dark-gray, #333);
}
.mypage-wrap .mypage-conts-tit + .sub-tab-menu {
	display:none;
}

@media only screen and (max-width:1024px) {
	.mypage-wrap {
		margin-top:-60px;
        flex-direction:column;
	}
	.mypage-wrap .mypage-menu-wrap {
		width:100%;
	}
	.mypage-wrap .user-info {
		display:none;
	}
	.mypage-wrap .mypage-conts-header {
		display:none;
	}

	.mypage-wrap .maypage-menu h1 {
		margin:0;
		border-bottom:1px solid var(--color-light-gray, #ccc);
		line-height:70px;
		background:url('/html/images/sub/mypage/icon_arrow_down.png') no-repeat right center;
	}
	.mypage-wrap .maypage-menu h1.on {
		background:url('/html/images/sub/mypage/icon_arrow_up.png') no-repeat right center;
	}
	.mypage-wrap .maypage-menu ul {
		display:none;
		padding:15px 20px;
		border-bottom:1px solid var(--color-light-gray, #ccc);
		background:#f5f5f7;
	}
	.mypage-wrap .maypage-menu h1.on + ul {
		display:block;
	}

	.mypage-wrap .mypage-conts {
		width:100%;
	}

	.mypage-wrap .mypage-conts-tit {
		display:none;
	}
	.mypage-wrap .mypage-conts-tit + .sub-tab-menu {
		display:block;
		margin-top:30px;
	}

    .mypage-wrap .sub-title {margin-top:20px;}
}
@media only screen and (max-width:768px) {
	.mypage-wrap {
		margin-top:-50px;
	}
}
@media only screen and (max-width:767px) {
	.mypage-wrap .maypage-menu h1 {
		font-size:18px; line-height:60px;
		background-size:auto 6px;
	}
	.mypage-wrap .maypage-menu h1.on {
		background-size:auto 6px;
		
	}
	.mypage-wrap .maypage-menu ul {
		padding:12px 15px;
	}
	.mypage-wrap .maypage-menu ul li a {
		font-size:16px; line-height:30px;
	}
}
@media only screen and (max-width:640px) {
	.mypage-wrap {
		margin-top:-40px;
	}
}

/* -------- 주문내역 -------- */
.mypage-order-wrap { 
	margin-top:-25px; 
	border-top:2px solid var(--color-dark-gray, #333);
}
.mypage-info { 
	margin:25px 0;
}
.mypage-info li { 
	position:relative;
	padding-left:12px;
	font-size:16px;
	color:#666;
	word-break:keep-all;
}
.mypage-info li:before { 
	content:'';
	position:absolute; top:9px; left:0;
	width:5px; height:5px;
	background:#666;
}

/* 검색 */
.mypage-order-search { 
	margin-bottom:40px;
	padding:20px 10px 20px 20px;
	background:#f8f8f8;
}
.mypage-order-search fieldset { 
	font-size:0; 
}
.mypage-order-search .select-wrap { 
	display:inline-block;
	width:calc(100% - 160px);
	vertical-align:top;
}
.mypage-order-search .select-wrap .select-top { 
	margin-bottom:10px;
	font-size:0; 
}
.mypage-order-search .select-wrap .checkbox-btn { 
	display:inline-block;
	font-size:0;
	vertical-align:top;
}
.mypage-order-search .select-wrap select { 
	display:inline-block;
	width:120px;
	background-color:#fff;
	/* padding:0 20px;
	height:40px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc); 
	font-size:18px;
	color:var(--color-dark-gray, #333);
	vertical-align:top;
    background-color:#fff; */
}
.mypage-order-search .select-wrap select + select {
	margin-left:20px;
}
.mypage-order-search .select-wrap .search-keyword { 
	display:inline-block;
	margin-left:20px;
	padding:5px 10px;
	width:calc(100% - 300px); height:40px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc); 
	font-size:16px;
	color:var(--color-dark-gray, #333);
	vertical-align:top;
}
.mypage-order-search .btn-wrap { 
	display:inline-block;
	width:160px;
	vertical-align:top;
}
.mypage-order-search .btn-wrap button { 
	width:100%; height:90px;
}

@media only screen and (max-width:1024px) {
	.mypage-order-wrap {
		margin-top:0;
	}
	.mypage-order-search .select-wrap {
		width:100%;
	}
	.mypage-order-search .btn-wrap {
		margin-top:20px;
		width:100%;
	}
	.mypage-order-search .btn-wrap button {
		height:60px;
	}
}
@media only screen and (max-width:767px) {
	.mypage-info {
		margin:15px 0;
	}
	.mypage-info li {
		padding-left:8px;
		font-size:14px;
	}
	.mypage-info li:before {
		top:7px;
		width:3px; height:3px;
	}
	.mypage-order-search {
		margin-bottom:30px;
		padding:20px;
	}
	/* .mypage-order-search .select-wrap select {
		height:30px;
		font-size:15px;
	} */
	.mypage-order-search .select-wrap .search-keyword {
		width:100%;
		height:30px;
		margin-left:0;
		margin-top:5px;
		font-size:15px;
	}
}
@media only screen and (max-width:660px) {
	.select-date .date {
		width:calc(50% - 15px);
	}
	.mypage-order-search .select-wrap .checkbox-btn {
		width:80%;
	}
	.mypage-order-search .checkbox-btn label {
		width:calc(25% - 10px);
	}
	.mypage-order-search .select-wrap select {
		padding:0 10px;
		width:20%;
	}
	.mypage-order-search .select-wrap select + select {
		margin-left:0;
	}
}
@media only screen and (max-width:640px) {
	.mypage-order-search {
		margin-bottom:20px;
		padding:15px;
	}
	.mypage-order-search .checkbox-btn label {
		margin-right:5px;
		width:calc(25% - 10px);
	}
	.mypage-order-search .select-wrap .checkbox-btn {
		width:100%;
	}
	.mypage-order-search .checkbox-btn label {
		width:calc(25% - 4px);
	}
	.mypage-order-search .checkbox-btn label:last-child {
		margin-right:0;
	}
	.mypage-order-search .select-wrap select {
		margin-top:5px;
		width:100%;
	}
	.mypage-order-search .btn-wrap {
		margin-top:15px;
	}
	.mypage-order-search .btn-wrap button {
		height:45px;
	}
}

/* 리스트 */
.mypage-order-list { 
	 
}
.mypage-order-box { 
	margin-bottom:20px;
	border:1px solid var(--color-light-gray, #ccc);
}
.mypage-order-box .mypage-order-box-header { 
	padding:0 20px;
	background:#f8f8f8;
	font-size:0;
}
.mypage-order-box .mypage-order-box-header li { 
	display:inline-block;
	width:50%;
	vertical-align:top;
	font-weight:700; font-size:18px; line-height:54px;
	color:var(--color-dark-gray, #333);
}
.mypage-order-box .mypage-order-box-header li a { 
	display:inline-block;
	font-weight:700;
	color:var(--color-dark-gray, #333);
    cursor:pointer;
}
.mypage-order-box .mypage-order-box-header li:last-child { 
	font-weight:400;
	color:var(--color-gray, #aaa);
	text-align:right;
}
.mypage-order-box .mypage-order-box-header [class^="btn"] {
    display:inline-block;
    width:80px;
    margin-left:10px;
    color:var(--color-primary, #0148d4);
    font-size:13px;
    vertical-align:middle;
}
.mypage-order-box .mypage-order-conts { 
	padding:5px 20px;
	display:flex;
}
.mypage-order-box .mypage-order-conts .conts-box { 
    flex-grow:1;
}
.mypage-order-box .mypage-order-conts .btn-wrap { 
	width:100px; 
}
.mypage-order-box .mypage-order-conts .btn-wrap li { 
	margin-bottom:10px; 
}
.mypage-order-box [class^="btn"] { 
	display:block;
	width:100%;
}
.mypage-order-box .mypage-order-conts .good-name { 
	font-size:20px;
	color:var(--color-dark-gray, #333);
}
.mypage-order-box .mypage-order-conts .good-name strong { 
	font-weight:700;
}
.mypage-order-box .mypage-order-conts .good-name li { 
	margin-bottom:3px;
	word-break:keep-all;
}
.mypage-order-box .mypage-order-conts .goods-payment { 
	margin-top:35px;
	font-size:0; 
}
.mypage-order-box .mypage-order-conts .goods-payment li { 
	position:relative;
	display:inline-block;
	padding:0 10px;
	font-size:16px;
	color:#666;
	vertical-align:middle;
}
.mypage-order-box .mypage-order-conts .goods-payment .price { 
	font-weight:700; font-size:20px;
	color:var(--color-dark-gray, #333);
}
.mypage-order-box .mypage-order-conts .goods-payment li:first-child { 
	padding-left:0; 
}
.mypage-order-box .mypage-order-conts .goods-payment li:after { 
	content:'';
	position:absolute; top:50%; right:0;
	margin-top:-7px;
	width:1px; height:15px;
	background:#ddd;
}
.mypage-order-box .mypage-order-conts .goods-payment li:last-child:after { 
	display:none; 
}
.mypage-order-box .mypage-order-conts .goods-payment li .pay_ready { 
	color:var(--color-gray, #aaa); 
}
.mypage-order-box .mypage-order-conts .goods-payment li .pay_done { 
	color:#054ef7; 
}
.mypage-order-box .mypage-order-conts .goods-payment li .order_cancel { 
	color:#f9051c; 
}
.mypage-order-box .mypage-order-conts .goods-payment li .refund_ready { 
	color:#fec065; 
}
.mypage-order-box .mypage-order-conts .goods-payment li .refund_done { 
	color:#ff9800; 
}
.mypage-order-box .mypage-order-box-footer { 
	padding:10px 20px;
	border-top:1px solid var(--color-light-gray, #ccc);
	display:flex;
    align-items:center;
}
.mypage-order-box .mypage-order-box-footer li { 
	font-weight:500; font-size:20px;
	color:var(--color-gray, #aaa);
    flex-grow:1;
}
.mypage-order-box .mypage-order-box-footer li:last-child { 
	width:100px; 
    flex-grow:0;
}

@media only screen and (max-width:767px) {
	.mypage-order-box {
		margin-bottom:15px;
	}
	.mypage-order-box .mypage-order-box-header li {
		font-size:15px; line-height:35px;
        padding:6px 0;
	}
    .mypage-order-box .mypage-order-box-header [class^="btn"] {
        display:block;
        margin-left:0;
    }
	.mypage-order-box .mypage-order-conts .conts-box {
		width:calc(100% - 70px);
	}
	.mypage-order-box .mypage-order-conts .good-name {
		padding-right:10px;
		font-size:16px;
	}
	.mypage-order-box .mypage-order-conts .goods-payment {
		margin-top:12px;
	}
	.mypage-order-box .mypage-order-conts .goods-payment .price {
		display:block;
		margin-bottom:3px;
		font-size:16px;
	}
	.mypage-order-box .mypage-order-conts .goods-payment li {
		padding:0 7px;
		font-size:14px;
	}
	.mypage-order-box .mypage-order-conts .goods-payment li:nth-of-type(2) {
		padding-left:0;
	}
	.mypage-order-box .mypage-order-conts .goods-payment li:after {
		margin-top:-5px;
		height:10px;
		display:none;
	}
	.mypage-order-box .mypage-order-conts .btn-wrap {
		width:70px;
	}
	.mypage-order-box .mypage-order-conts .btn-wrap li {
		margin-bottom:5px;
	}
	.mypage-order-box .mypage-order-box-footer li {
		font-size:15px;
	}
	.mypage-order-box .mypage-order-box-footer li:last-child {
		width:70px;
	}
}
@media only screen and (max-width:660px) {
}

/* no data */
.no-data { 
	padding:120px 0;
	text-align:center;
    flex-grow:1;
}
.no-data .icon { 
	margin:0 auto 40px;
	width:120px; height:120px;
	border-radius:50%;
	border:1px solid #eee;
}
.no-data.order .icon { 
	background:url('/html/images/sub/mypage/icon_cart.png') no-repeat center center; 
}
.no-data.cart .icon { 
	background:url('/html/images/sub/mypage/icon_cart.png') no-repeat center center; 
}
.no-data.wishlist .icon { 
	background:url('/html/images/sub/mypage/icon_wishlist.png') no-repeat center center; 
}
.no-data.mypoint .icon { 
	background:url('/html/images/sub/mypage/icon_point.png') no-repeat center center; 
}
.no-data p { 
	font-size:18px; color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.no-data.lecture {
    padding:50px 0;
}

/* -------- 장바구니 -------- */
.mypage-cart-list { 
	margin-top:18px;
	width:100%;
	border-top:2px solid var(--color-dark-gray, #333); 
}
.mypage-cart-box { 
	padding:30px 0 30px 10px;
	border-bottom:1px solid #ddd;
    display:flex;
    flex-wrap:wrap;
}
.mypage-cart-box > * { 
	display:inline-block;
	vertical-align:top;
}
.mypage-cart-box .checkbox-wrap label { 
	font-size:0;	 
}
.mypage-cart-box .thumb { 
	width:230px; 
}
.mypage-cart-box .thumb a { 
	display:block; 
}
.mypage-cart-box .thumb img { 
	width:100%; 
}
.mypage-cart-box .goods-info { 
	padding-left:25px;
	width:calc(100% - 264px);
}
.mypage-cart-box .goods-name li { 
	font-size:18px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.mypage-cart-box .goods-name li strong { 
	font-weight:700;
}
.mypage-cart-box .goods-footer { 
	position:relative;
	margin-top:13px; padding:10px;
	height:60px;
	border-radius:4px;
	background:#f5f5f7; 
}
.mypage-cart-box .goods-footer .quantity-wrap { 
	position:absolute; top:10px; left:10px;
    display:flex;
}
.mypage-cart-box .goods-footer .save-date { 
	position:absolute; top:10px; left:11px;
	font-size:16px; line-height:40px;
	color:var(--color-gray, #aaa);
}
.mypage-cart-box .goods-footer .price { 
	font-size:20px; line-height:40px;
	color:var(--color-dark-gray, #333);
	text-align:right; 
}

.mypage-wrap .mypage-foot-btn { 
	margin-top:20px;	 
}
.mypage-wrap .mypage-foot-btn [class^="btn"] { 
	width:80px;
}

.mypage-cart .mypage-total { 
	margin-top:60px;
	padding:0 10px;
	border-top:1px solid var(--color-dark-gray, #333);
	border-bottom:1px solid var(--color-dark-gray, #333);
    font-size:0;
}
.mypage-cart .mypage-total dl { 
	padding:17px 0; 
}
.mypage-cart .mypage-total dl dt,
.mypage-cart .mypage-total dl dd { 
	display:inline-block;
	font-weight:400; font-size:18px; line-height:36px;
	color:var(--color-dark-gray, #333);
	vertical-align:middle;
}
.mypage-cart .mypage-total dl dt { 
	width:150px; 
}
.mypage-cart .mypage-total dl dd { 
	width:calc(100% - 150px);
	text-align:right;
}
.mypage-cart .mypage-total .total-price { 
	padding:20px 0;
	border-top:1px solid #ddd; 
}
.mypage-cart .mypage-total .total-price dt { 
	font-weight:500; font-size:22px; 
}
.mypage-cart .mypage-total .total-price dd { 
	font-weight:500; font-size:22px; 
	color:var(--color-primary, #0148d4);
}
.mypage-cart .mypage-total .total-price dd strong { 
	font-weight:500; font-size:28px; 
}

.mypage-wrap .mypage-btn { 
	margin-top:60px;
    gap:0 20px;
	justify-content:center;
}
.mypage-wrap .mypage-btn li { 
    /* flex-grow:1; */
	width:calc(50% - 10px);
}
.mypage-wrap .mypage-btn li [class^="btn"] { 
	display:block;
	width:100%; 
}
@media only screen and (max-width:640px) {
	.mypage-cart-box {
		position:relative;
		padding:20px 0;
	}
	.mypage-cart-box .goods-info {
		padding-left:0;
		width:100%;
	}
	.mypage-cart-box .thumb {
		width:100px;
	}
	.mypage-cart-box .goods-name {
		position:absolute; top:20px; left:154px;
	}
	.mypage-cart-box .goods-name li {
		font-size:14px;
	}
	.mypage-cart-box .goods-footer {
		margin-top:12px;
		padding:7px;
		height:51px;
	}
	.mypage-cart-box .goods-footer .quantity-wrap {
		top:8px; left:8px;
		width:84px;
	}
	.mypage-cart-box .goods-footer .quantity-wrap button {
		width:24px; height:33px;
	}
	.mypage-cart-box .goods-footer .quantity-wrap input {
		width:33px; height:33px;
	}
	.mypage-cart-box .goods-footer .quantity-wrap button:before {
		margin-left:-4px;
		width:8px;
	}
	.mypage-cart-box .goods-footer .quantity-wrap .add:after {
		margin-top:-4px;
		height:8px;
	}
	.mypage-cart-box .goods-footer .save-date {
		top:8px;
		font-size:14px; line-height:35px;
	}
	.mypage-cart-box .goods-footer .price {
		font-size:16px; line-height:35px;
	}

	.mypage-cart .mypage-total {
		margin-top:35px;
	}

	.mypage-cart .mypage-total dl {
		padding:13px 0;
	}
	.mypage-cart .mypage-total dl dt, 
	.mypage-cart .mypage-total dl dd {
		font-size:14px; line-height:30px;
	}
	.mypage-cart .mypage-total .total-price {
		padding:15px 0;
	}
	.mypage-cart .mypage-total .total-price dt {
		font-size:18px;
	}
	.mypage-cart .mypage-total .total-price dd {
		font-size:18px;
	}
	.mypage-cart .mypage-total .total-price dd strong {
		font-size:24px;
	}
	.mypage-wrap .mypage-btn {
		margin-top:30px;
        column-gap:10px;
	}
    .mypage-wrap .mypage-foot-btn { 
        margin-top:15px;	 
    }

	.no-data {
		padding:60px 0;
	}
	.no-data .icon {
		margin-bottom:20px;
		width:80px; height:80px;
	}
	.no-data.cart .icon ,
	.no-data.mypoint .icon ,
	.no-data.order .icon {
		background-size:auto 25px;
	}
	.no-data.wishlist .icon {
		background-size:auto 18px;
	}
	.no-data p {
		font-size:15px;
	}
}

/* -------- 마이포인트 -------- */
.mypoint-info { 
	padding:31px 20px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
	font-size:0;
}
.mypoint-info ul {width:100%;}
.mypoint-info ul li {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.mypoint-info ul li:last-child {margin-top:15px;}
.mypoint-info .point-title { 
	width:260px; 
	font-weight:700; font-size:20px;
	color:var(--color-dark-gray, #333);
}
.mypoint-info .point-title .desc { 
    display:block;
	margin-top:5px;
	font-size:16px;
	color:#666;
}
.mypoint-info .point strong {
    color:var(--color-red, #dc3545);
    font-weight:bold;
}
.mypoint-info ul .more a { 
	display:block;
	width:160px;
	border-radius:4px;
	background:var(--color-primary, #0148d4);
	font-size:18px; line-height:50px;
	color:#fff;
	text-align:center;;
}
.mypoint-info .point {
	width:calc(100% - 282px);
	text-align:right;
	margin-left:20px;
    font-weight:500;
	vertical-align:middle;
	font-size:28px;
	color:var(--color-dark-gray, #333); 
}
.mypoint-info .point.use {
	color:var(--color-gray, #aaa);
}

/* list */
.mypoint-list { 
	margin-top:60px;
	width:100%;
	border-top:2px solid var(--color-dark-gray, #333);
	border-bottom:1px solid var(--color-dark-gray, #333);
}
.mypoint-list thead th { 
	padding:16px 20px;
	font-weight:500; font-size:16px;
	color:var(--color-dark-gray, #333);
	text-align:left;
}
.mypoint-list thead .point { 
	text-align:center; 
}
.mypoint-list tbody tr { 
	border-top:1px solid #ddd; 
}
.mypoint-list tbody tr:first-child { 
	border-color:var(--color-dark-gray, #333);
}
.mypoint-list tbody td { 
	padding:22px 20px;
	font-weight:500; font-size:18px;
	color:var(--color-dark-gray, #333);
	word-break:break-all;
	text-align:left;
}
.mypoint-list tbody .date { 
	font-size:14px;
	color:var(--color-gray, #aaa);
}
.mypoint-list tbody .point { 
	font-weight:400;
	text-align:center; 
}
.mypoint-list tbody .point span { 
	color:var(--color-gray, #aaa); 
}
.mypoint-list tbody .point strong { 
	font-weight:400;
	color:var(--color-red, #dc3545); 
}
.mypoint-list thead th.text-center { 
	text-align:center; 
}

.basic-list { 
	margin-top:60px;
	width:100%;
	border-top:2px solid var(--color-dark-gray, #333);
	border-bottom:1px solid var(--color-dark-gray, #333);
}
.basic-list thead th { 
	padding:16px 20px;
	font-weight:500; font-size:16px;
	color:var(--color-dark-gray, #333);
	text-align:left;
}
.basic-list thead .point { 
	text-align:center; 
}
.basic-list tbody tr { 
	border-top:1px solid #ddd; 
}
.basic-list tbody tr:first-child { 
	border-color:var(--color-dark-gray, #333);
}
.basic-list tbody td { 
	padding:22px 20px;
	font-weight:500; font-size:18px;
	color:var(--color-dark-gray, #333);
	word-break:break-all;
	text-align:left;
}
.basic-list tbody .date { 
	font-size:14px;
	color:var(--color-gray, #aaa);
}
.basic-list tbody .point { 
	font-weight:400;
	text-align:center; 
}
.basic-list tbody .point span { 
	color:var(--color-gray, #aaa); 
}
.basic-list tbody .point strong { 
	font-weight:400;
	color:var(--color-red, #dc3545); 
}
.basic-list thead th.text-center { 
	text-align:center; 
}
.checkbox-wrap + .addr-list {
	margin-top:18px;
}
.addr-list tbody .request-message { 
	font-size:16px;
	color:var(--color-gray, #aaa); 
	font-weight:400;
	letter-spacing:-0.025em;
	display:inline-block;
	word-break:break-all;
}
.addr-list tbody .label { 
	font-size:13px;
	color:var(--color-dark-gray, #333); 
	letter-spacing:-0.025em;
	background:#f5f5f5;
	padding:6px 12px;
	border-radius:15px;
}
.addr-list tbody .label + p {
	margin-top:6px;
}
.addr-list tbody p + .request-message {
	margin-top:5px;
}

/* 마이페이지 리스트 버튼 */
.addr-list tbody .btn-box {text-align:center;}
.addr-list tbody .btn-box .btn {
	position:relative;
	font-size:16px;
	letter-spacing:-0.025em;
	color:var(--color-gray, #aaa);
	padding-left:7px;
	padding-right:4px;
}
.addr-list tbody .btn-box .btn + .btn:before {
	content:'';
	position:absolute; top:50%; left:0;
	transform:translateY(-50%);
	width:1px; height:14px;
	background:#ddd;
}
.addr-list .address-info {
	position:relative;
	padding-left:44px;
}
.addr-list .checkbox-wrap {
	position:absolute;
	top:50%;
    left:0;
    transform:translateY(-50%);
}
.addr-list .checkbox-wrap label {
	font-size:0;
}

@media only screen and (max-width:1024px) {
	.mypoint-info {
		margin-top:40px;
	}
}
@media only screen and (max-width:767px) {
	.mypoint-info {
		margin-top:30px;
		padding:20px 15px;
	}
	.mypoint-info .point-title {
		width:100%;
		font-size:16px;
	}
	.mypoint-info .point-title .desc {
		font-size:14px;
	}
	.mypoint-info .point {
		margin-top:15px;
		width:100%;
		margin-left:15px;
		font-size:20px;
	}
	.mypoint-info ul .more a {
		width:100px;
		font-size:14px; line-height:35px;
	}
	.mypoint-list {
		display:block;
		margin-top:30px;
	}
	.mypoint-list thead,
	.mypoint-list colgroup {
		display:none;
	}
	.mypoint-list tbody ,
	.mypoint-list tbody tr {
		display:block;
		width:100%;
	}
	.mypoint-list tbody tr {
		padding:15px 0;
	}
	.mypoint-list tbody tr:first-child {
		border-top:0 none;
	}
	.mypoint-list tbody td {
		display:block;
		padding:0;
		width:100%;
		font-size:15px;
	}
	.mypoint-list tbody .history {
		margin:3px 0 1px;
	}
	.mypoint-list tbody .point {
		text-align:left;
	}
	.mypoint-list tbody td:before {
		display:inline-block;
		margin-right:10px;
		vertical-align:top;
	}
	.mypoint-list tbody .point:before {
		content:'적립/차감 포인트';
	}

    
	.basic-list {
		display:block;
		margin-top:30px;
	}
	.basic-list thead,
	.basic-list colgroup {
		display:none;
	}
	.basic-list tbody ,
	.basic-list tbody tr {
		display:block;
		width:100%;
	}
	.basic-list tbody tr {
		padding:15px 0;
	}
	.basic-list tbody tr:first-child {
		border-top:0 none;
	}
	.basic-list tbody td {
		display:block;
		padding:0;
		width:100%;
		font-size:15px;
	}
	.basic-list tbody .history {
		margin:3px 0 1px;
	}
	.basic-list tbody .point {
		text-align:left;
	}
	.basic-list tbody td:before {
		display:inline-block;
		margin-right:10px;
		vertical-align:top;
	}
	.basic-list tbody .point:before {
		content:'적립/차감 포인트';
	}

    .addr-list tbody .btn-box {
        width:auto;
        text-align:left;
        margin-top:5px;
        margin-left:23px;
    }
	.addr-list tbody .label {
		font-size:11px;
	}
	.addr-list tbody .request-message {
		font-size:13px;
	}
	.addr-list .btn-area {
		display:none;
	}
	.addr-list .receiver-name {
		display:inline-block;
		width:auto;
		font-size:14px;
		padding-left:30px;
	}
	.addr-list .phone-number {
		position:relative;
		display:inline-block;
		width:auto;
		margin-left:6px;
		padding-left:7px;
		margin-top:14px;
		font-size:14px;
	}
	.addr-list tbody .receiver-name + .phone-number:before {
		content:'';
		position:absolute; top:50%; left:0;
		transform:translateY(-50%);
		width:1px; height:14px;
		background:#ddd;
	}
	.addr-list .address-info {
		padding-left:30px;
	}
	.addr-list .checkbox-wrap {
		left:3px;
	}
}



/* -------- 마이쿠폰 -------- */
.mypage-coupon-wrap { 	 
}
.coupon-register { 
	padding:35px 20px;
	background:#f8f8f8;
}
.coupon-register fieldset { 
	font-size:0; 
}
.coupon-register label { 
	display:inline-block;
	width:230px;
	font-weight:700; font-size:20px; line-height:50px;
	color:var(--color-dark-gray, #333);
	vertical-align:top;
}
.coupon-register .coupon-form { 
	display:inline-block;
	width:calc(100% - 230px);
	vertical-align:top;
}
.coupon-register .coupon-form > * { 
	display:inline-block;
	vertical-align:top;
}
.coupon-register .coupon-form input { 
	padding:0 20px;
	width:calc(100% - 170px); height:50px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
	font-size:20px;
	color:var(--color-dark-gray, #333);
}
.coupon-register .coupon-form input::placeholder { 
	color:var(--color-gray, #aaa); 
}
.coupon-register .coupon-form button { 
	margin-left:10px;
	width:160px; 
}

/* 쿠폰함 */
.coupon-list { 
	margin-top:100px; 
}
.coupon-register + .coupon-list { 
	margin-top:35px; 
}
.coupon-list > h1 { 
	margin-bottom:10px;
	font-weight:700; font-size:24px;
	color:var(--color-dark-gray, #333);
}
.coupon-list-wrap { 
    display:flex;
    flex-wrap:wrap;
    gap:60px 40px;
}
.coupon-list-wrap .coupon-box { 
    width:calc(50% - 20px);
}
.coupon-box .coupon { 
	position:relative; z-index:11;
	/* padding-top:37px;  */
    padding-right:105px;
	height:180px;
	background:url('/html/images/sub/mypage/coupon_barcode.png') no-repeat right center;
	text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.coupon-box .coupon:before { 
	content:'';
	position:absolute; top:0; left:0;
	z-index:-1;
	width:calc(100% - 105px); height:100%;
	border:1px solid #ddd;
	border-right:0 none;
	box-sizing:border-box;
}
.coupon-box .coupon dt { 
	margin-bottom:3px;
	font-weight:700; font-size:20px;
	color:var(--color-dark-gray, #333);
}
.coupon-box .coupon dd { 
	font-size:18px;
	color:var(--color-gray, #aaa);
}
.coupon-box .coupon dd strong { 
	font-weight:700; font-size:36px; line-height:1;
	color:var(--color-dark-gray, #333); 
}
.coupon-box .coupon dd:nth-child(3) { 
	margin-top:15px; 
}
.coupon-box .coupon .amount {
    font-size:15px;
}
.coupon-box .info { 
	display:block;
	margin-top:7px;
}
.coupon-box .info a { 
	display:inline-block;
	padding-right:10px;
	background:url('/html/images/sub/mypage/arrow.png') no-repeat right center;;
	font-weight:500; font-size:14px;
	color:var(--color-dark-gray, #333);
}

.coupon-box .coupon.complete { 
	background:url('/html/images/sub/mypage/coupon_barcode_off.png') no-repeat right center;
}
.coupon-box .coupon.complete * { 
	color:var(--color-gray, #aaa);	 
}

.popup-wrap .applicable-list {
	overflow:hidden;
	height:calc(100% - 12px);
}
.popup-wrap .applicable-list h1 {
	margin:30px 0;
	font-weight:500; font-size:18px; line-height:1;
	color:var(--color-dark-gray, #333);
}
.popup-wrap .applicable-list ul {
	overflow-x:hidden;
	height:calc(100% - 85px);
	border-top:1px solid var(--color-light-gray, #ccc);
}
.popup-wrap .applicable-list ul li {
	display:block;
	padding-right:25px;
	border-bottom:1px solid var(--color-light-gray, #ccc);
	font-size:0;
}
.popup-wrap .applicable-list ul li:first-child {
	border-top:0 none;
}
.popup-wrap .applicable-list ul li * {
	display:inline-block;
	line-height:59px;
	vertical-align:top;
}
.popup-wrap .applicable-list ul li strong {
	width:calc(100% - 100px);
	font-weight:400; font-size:18px;
	color:var(--color-dark-gray, #333);
    text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
.popup-wrap .applicable-list ul li a {
	width:100px;
	font-weight:700; font-size:15px;
	color:var(--color-primary, #0148d4);
	text-align:right;
}

.popup-wrap .popup-btn {
	margin-top:58px;
	width:100%;
}
.popup-wrap .popup-btn button {
	width:100%; 
}

@media only screen and (max-width:767px) {
	.coupon-register {
		padding:25px 20px;
	}
	.coupon-register label {
		display:block;
		margin-bottom:15px;
		width:100%;
		line-height:1;
	}
	.coupon-register .coupon-form {
		width:100%;
	}
	.coupon-register .coupon-form input {
		height:40.5px;
		font-size:18px;
	}
	.coupon-list > h1 {
		font-size:18px;
	}
	.coupon-list-wrap {
        row-gap:40px;
	}
	.coupon-list-wrap .coupon-box {
		width:100%;
	}
	.coupon-box .coupon {
		margin:0 auto;
		padding-right:85px;
		max-width:450px; height:150px;
		background-size:auto 100%;
	}
	.coupon-box .coupon.complete {
		background-size:auto 100%;
	}
	.coupon-box .coupon:before {
		width:calc(100% - 85px);
	}
	.coupon-box .coupon dt {
		font-size:16px;
	}
	.coupon-box .coupon dd {
		font-size:15px;
	}
	.coupon-box .coupon dd:last-child {
		margin-top:10px;
	}
	.coupon-box .coupon dd strong {
		font-size:27px;
	}
	.coupon-box .info {
		margin:7px auto 0;
		max-width:450px;
	}

	.popup-wrap .applicable-list {
		height:calc(100vh - 240px);
	}
	.popup-wrap .applicable-list h1 {
		margin:15px 0;
		font-size:15px;
	}
	.popup-wrap .applicable-list ul {
		height:calc(100vh - 300px);
	}
    .popup-wrap .applicable-list ul li {
        padding-right:5px;
    }
	.popup-wrap .applicable-list ul li * {
		line-height:49px;
	}
	.popup-wrap .applicable-list ul li strong {
		font-size:14px;
	}
	.popup-wrap .applicable-list ul li a {
		font-size:13px;
	}
	.popup-wrap .popup-btn {
		margin-top:30px;
	}
}
@media only screen and (max-width:640px) {
	.coupon-register + .coupon-list {
		margin-top:25px;
	}
	.coupon-list-wrap {
        row-gap:30px;
	}
	.coupon-register .coupon-form input {
		width:100%; height:40px;
		font-size:14px;
	}
	.coupon-register .coupon-form button {
		margin-top:7px; margin-left:0;
		width:100%; 
	}
}



/* 회원수정 */
.mypage-modify {
	/* font-size:0; */
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
}

.mypage-modify-wrap {
	display:inline-block;
	width:calc(100% - 460px);
	vertical-align:top;
	flex-grow:1;
}
.mypage-modify-wrap .sub-tit {
	margin-top:75px; margin-bottom:-35px;
	font-weight:700; font-size:18px;
	color:var(--color-gray, #aaa);
}
.mypage-modify-wrap .sub-tit + .login-form > li > label {
	margin-top:20px;
}
.mypage-modify-wrap .login-form { 
    margin-top:40px; 
}
.mypage-modify-wrap .login-btn { 
	margin:30px 0 10px;
}
/* .mypage-modify-wrap .login-btn button { 
	width:100%; 
} */

.mypage-modify-btn {
	margin-top:50px;
	/* font-size:0; */
}
.mypage-modify-btn li a {
	display:block;
}
.mypage-modify-wrap a.link {float:right;}

.sns-account {
	display:inline-block;
	margin-left:60px;
	padding:30px;
	width:400px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
	vertical-align:top;
}
.sns-account h1 {
	font-weight:500; font-size:22px;
	color:var(--color-dark-gray, #333);
}
.sns-account .sns-account-wrap {
	margin-top:30px;
}
.sns-account .sns-account-wrap .sns-account-list {
	padding:11px 0;
	border-bottom:1px solid #eee;
	font-size:0;
}
.sns-account .sns-account-wrap .sns-account-list:first-child {
	padding-top:0;
}
.sns-account .sns-account-wrap .sns-account-list:last-child {
	padding-bottom:0;
	border-bottom:0 none;
}
.sns-account .sns-account-wrap .sns-account-list dl {
	display:inline-block;
	width:calc(100% - 80px);
	vertical-align:middle;
}
.sns-account .sns-account-wrap .sns-account-list .sns {
	display:inline-block;
	margin-right:20px;
	width:60px; height:60px;
	border-radius:50%;
	vertical-align:top;
}
.sns-account .sns-account-wrap .sns-account-list dd {
	display:inline-block;
	font-size:14px; line-height:60px;
	color:var(--color-gray, #aaa);
	vertical-align:top;
}
.sns-account .sns-account-wrap .sns-account-list a {
	width:80px; 
}
.sns-account .sns-account-wrap .sns-account-list a.on {
	border:1px solid var(--color-dark-gray, #333);
	background:#fff;
	color:var(--color-dark-gray, #333);
}

.sns-account .sns-account-wrap .sns-account-list .naver { 
	background:#03c75a url('/html/images/login/sns_naver.png') no-repeat center center;
}
.sns-account .sns-account-wrap .sns-account-list .kakao {
	background:#fee500 url('/html/images/login/sns_kakao.png') no-repeat center center;
}
.sns-account .sns-account-wrap .sns-account-list .facebook {
	background:#166fe5 url('/html/images/login/sns_facebook.png') no-repeat center center;
}
.sns-account .sns-account-wrap .sns-account-list .google {
	background:#f5f5f5 url('/html/images/login/sns_google.png') no-repeat center center;
}

.form-wrap .form-box { 
	position:relative;
}
.form-wrap .form-box + .form-box { 
	margin-top:20px; 
}
.form-wrap .form-box .form-title label { 
	display:block;
	font-size:15px; line-height:30px;
	color:var(--color-primary, #0148d4);
}
.form-wrap .form-box .input-box {
	display:flex;
	justify-content:space-between;
}
.form-wrap .form-box .input-box + .input-box {margin-top:5px;}
.form-wrap .form-box .input-box input { 
	padding:3px 5px;
	height:40px;
	border:0 none; border-bottom:1px solid var(--color-light-gray, #ccc);
	font-size:18px;
	color:var(--color-dark-gray, #333);
	flex-grow:1;
	background:transparent;
    max-width:100%;
}
.form-wrap .form-box .input-box input::placeholder { 
	color:var(--color-gray, #aaa); 
}
.form-wrap .form-box .input-box select { 
	padding:3px 10px;
	width:30%; 
	/* height:40px;
	border:1px solid var(--color-light-gray, #ccc);
	font-size:18px;
	color:var(--color-dark-gray, #333);
	border-radius:4px;
    background-color:#fff; */
    min-width:60px;
}
.form-wrap .form-box .input-box span + input {
	width:30%;
    min-width:60px;
}
.form-wrap .form-box .input-box span {
	font-size:18px;
	color:var(--color-dark-gray, #333);
	line-height:40px;
	margin:0 5px;
}
.form-wrap .form-box .input-box input:read-only {
	background:#ddd;
	border-bottom:none;
}
.form-wrap .form-box .input-box .btn {
	display:inline-block;
    width:140px;
    border-radius:4px;
    border:1px solid var(--color-dark-gray, #333);
    font-weight:500;
    font-size:16px;
    line-height:38px;
    color:var(--color-dark-gray, #333);
    text-align:center;
    vertical-align:top;
	margin-left:10px;
}
.form-wrap .form-box .textarea-box textarea {
	width:100%;
	height:100px;
	font-size:18px;
    color:var(--color-dark-gray, #333);
    border:1px solid var(--color-light-gray, #ccc);
	resize:none;
}
.form-wrap .form-box .text {
	font-size:15px;
	color:var(--color-dark-gray, #333);
}
.form-wrap .form-box .checkbox-wrap li {
	display:inline-block;
	vertical-align:top;
}
.form-wrap .form-box .checkbox-wrap li + li {
	margin-left:20px;
}
.form-wrap .form-box .checkbox-wrap + input {
	margin-top:15px;
}
.form-wrap .form-box select {
    /* padding:0 20px;
    width:100%;
    height:50px;
    border-radius:4px;
    border:1px solid var(--color-light-gray, #ccc);
    font-size:18px;
    color:var(--color-dark-gray, #333);
    background-color:#fff; */
}
.search-post {
    display:none; 
    position:relative;
    border:1px solid #ced4da; 
    width:100%; 
    height:300px; 
    margin:5px 0; 
}
.search-post .search-post-btn {
    cursor:pointer;
    position:absolute;
    right:0px;
    top:-1px;
    z-index:1;
}

@media only screen and (max-width:1180px) {
    .mypage-modify-wrap {
        width:calc(100% - 390px);
    }
	.sns-account {
        margin-left:30px;
        padding:20px;
        width:360px;
	}
}
@media only screen and (max-width:850px) {
	.mypage-modify-wrap {
		width:100%;
	}

	.sns-account {
		margin-top:30px; margin-left:0;
		width:100%;
	}
}
@media only screen and (max-width:767px) {
	.mypage-modify {
		margin-top:0px;
	}
	.mypage-modify-btn {
		margin-top:30px;
	}
	.sns-account {
		margin-top:20px;
		padding:20px;
	}
	.sns-account h1 {
		font-size:17px;
	}
	.sns-account .sns-account-wrap {
		margin-top:20px;
	}
	.sns-account .sns-account-wrap .sns-account-list {
		padding:7px 0;
	}
	.sns-account .sns-account-wrap .sns-account-list .sns {
		margin-right:10px;
		width:45px; height:45px;
	}
	.sns-account .sns-account-wrap .sns-account-list dl {
		width:calc(100% - 65px);
	}
	.sns-account .sns-account-wrap .sns-account-list dd {
		font-size:12px; line-height:45px;
	}
	.sns-account .sns-account-wrap .sns-account-list a {
		width:65px;
		/* font-size:12px; line-height:30px; */
	}
	.sns-account .sns-account-wrap .sns-account-list .naver { 
		background-size:auto 30%;
	}
	.sns-account .sns-account-wrap .sns-account-list .kakao {
		background-size:auto 35%;
	}
	.sns-account .sns-account-wrap .sns-account-list .facebook {
		background-size:auto 40%;
	}
	.sns-account .sns-account-wrap .sns-account-list .google {
		background-size:auto 35%;
	}

	.form-wrap .form-box {
		margin-top:15px;
	}
	.form-wrap .form-box .input-box.input-button input {
		width:68%;
	}
	.form-wrap .form-box .input-box .btn {
		width:30%;
	}
    /* .form-wrap .form-box select {
        padding:0 10px;
        height:40px;
        font-size:15px;
    } */
}

/* -------- 나의강의실 -------- */
/* tab */
/* .lecture-room-tab { 
	display:table;
	width:100%; height:60px;
	table-layout:fixed;
}
.lecture-room-tab li { 
	position:relative;
	display:table-cell;
	border:1px solid var(--color-gray, #aaa);
	border-left-width:0;
	text-align:center;
	vertical-align:middle;
}
.lecture-room-tab li:first-child { 
	border-left-width:1px;
}
.lecture-room-tab li.on:before { 
	content:'';
	position:absolute; top:-1px; left:-1px;
	width:100%; height:100%;
	border:1px solid var(--color-primary, #0148d4);
}
.lecture-room-tab li a { 
	position:relative; z-index:11;
	display:block;
	font-size:20px;
	color:var(--color-gray, #aaa);
}
.lecture-room-tab li.on a { 
	font-weight:500;
	color:var(--color-primary, #0148d4); 
} */


.border-tab { 
	/* display:table; */
	width:100%; 
    /* height:60px;
	table-layout:fixed; */
    display:flex;
}
.border-tab li { 
	position:relative;
	display:table-cell;
	border:1px solid var(--color-gray, #aaa);
	border-left-width:0;
	text-align:center;
	vertical-align:middle;
    flex-grow:1;
    height:60px;
    line-height:60px;
}
.border-tab li:first-child { 
	border-left-width:1px;
}
.border-tab li.on:before { 
	content:'';
	position:absolute; top:-1px; left:-1px;
	width:100%; height:100%;
	border:1px solid var(--color-primary, #0148d4);
}
.border-tab li a { 
	position:relative; z-index:11;
	display:block;
	font-size:20px;
	color:var(--color-gray, #aaa);
}
.border-tab li.on a { 
	font-weight:500;
	color:var(--color-primary, #0148d4); 
}



/* list */
.lecture-room-wrap { 	 
}
.lecture-room-list { 	 
	position:relative; left:-20px;
	width:calc(100% + 40px);
    display:flex;
    flex-wrap:wrap;
    gap:40px 4.25%;
    width:100%;
    left:0;
}
.lecture-room-list .lecture-room-box { 
	/* padding:0 20px; */
	width:50%;
	/* margin-bottom:40px;	  */
	vertical-align:top;
    width:47.875%;
}
.lecture-room-box .thumb { 
	position:relative; 
	border-radius:4px;
	overflow:hidden;
    aspect-ratio:25/14;
}
.lecture-room-box .thumb a { 
	overflow:hidden;
	display:block; 
	border-radius:4px;
	line-height:0;
}
.lecture-room-box .thumb img { 
	width:100%; 
    height:100%;
    object-fit:cover;
}
.lecture-room-box.end .thumb .end-info { 
	position:absolute; top:0; left:0;
	width:100%; height:100%;
	background:rgba(0,0,0,.7);
	text-align:center;
}
.lecture-room-box.end .thumb .end-info span { 
	position:absolute; top:50%; left:0;
	transform:translateY(-50%);
	width:100%;
	font-size:14px;
	color:#fff;
}
.lecture-room-box .lecture-info { 
	padding-top:16px; 
}
.lecture-room-box .lecture-info h1 { 
	font-size:0;
}
.lecture-room-box .lecture-info h1 > * { 
	display:inline-block;
	vertical-align:top;
}
.lecture-room-box .lecture-info h1 .tit { 
	width:calc(100% - 50px); 
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
}
.lecture-room-box .lecture-info h1 .tit em { 
	font-style: normal; font-weight:700;
	color:var(--color-primary, #0148d4);
}
.lecture-room-box .lecture-info h1 .progress { 
	width:50px;
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
	text-align:right;
}
.lecture-room-box .lecture-info .date { 
	margin:10px 0 17px;
	font-size:0;
}
.lecture-room-box .lecture-info .date li { 
	display:inline-block;
	width:calc(100% - 80px); 
	font-size:15px;
	color:var(--color-dark-gray, #333);
	vertical-align:top;
}
.lecture-room-box .lecture-info .date li:last-child { 
	width:80px;
	text-align:right;
}
.lecture-room-box .lecture-info .btn-area li { 
	margin-left:10px;
	width:calc(25% - 8px);
}
.lecture-room-box .lecture-info .btn-area li:first-child { 
	margin-left:0;
	width:calc(50% - 5px);
}
.lecture-room-box .lecture-info .btn-area.n2 li { 
	width:calc(50% - 5px);
}
.lecture-room-box .lecture-info .btn-area li :is(button,a) { 
	width:100%;
	word-break:keep-all;
}
.lecture-room-box .lecture-info .btn-area li .btn-ml { 
	height:50px;
	font-size:14px;
    padding:0;
}
.lecture-room-box .lecture-info .btn-area li :disabled { 
	background:var(--color-light-gray, #ccc);
    border:1px solid var(--color-light-gray, #ccc);
}

.btn-wrap a:disabled,
.btn-wrap button:disabled {pointer-events:none;}

@media only screen and (max-width:1024px) {
	.lecture-room-tab {
		margin-top:40px;
	}
	.lecture-room-list {
        row-gap:30px;
	}
}
@media only screen and (max-width:767px) {
	/* .lecture-room-tab {
		height:45px;
	}
	.lecture-room-tab li a {
		font-size:16px;
	} */
	.border-tab li {
		height:45px;
        line-height:45px;
	}
	.border-tab li a {
		font-size:16px;
	}
	.lecture-room-list {
		/* left:-10px; */
		/* width:calc(100% + 20px); */
        gap:25px 4%;
	}
	.lecture-room-list .lecture-room-box {
		/* margin-bottom:30px; */
		/* padding:0 10px; */
        width:46%;
	}
	.lecture-room-box .lecture-info .btn-area li {
		margin-left:5px;
		width:calc(25% - 3px);
	}
	.lecture-room-box .lecture-info .btn-area li:first-child {
		width:calc(50% - 4px);
	}
	.lecture-room-box .lecture-info .btn-area li .btn-ml {
		font-size:12px;
		height:40px;
        padding:0;
	}
}
@media only screen and (max-width:640px) {
	.lecture-room-list .lecture-room-box {
		width:100%;
	}
	.lecture-room-box .lecture-info {
		padding-top:12px;
	}
	.lecture-room-box .lecture-info h1 .tit {
		font-size:15px;
	}
	.lecture-room-box .lecture-info h1 .progress {
		font-size:15px;
	}
	.lecture-room-box .lecture-info .date {
		margin:7px 0 12px;
	}
	.lecture-room-box .lecture-info .date li {
		font-size:13px;
	}
}

/* -------- 나의강의실 -------- */
.myclass-detail {
}
.myclass-header {
}
.myclass-detail .myclass-banner {
	position:relative;
	width:100%; height:220px;
	background:url('/html/images/sub/mypage/myclass_header.jpg') no-repeat center center;
	background-size:cover;
}
.myclass-detail .myclass-banner h1 {
	position:absolute; bottom:28px; left:20px;
	font-weight:500; font-size:32px;
	color:#fff;
}
.myclass-detail .myclass-banner h1 span {
	display:block;
	font-weight:300; font-size:18px;
}

.myclass-detail .myclass-lecture-info {
	margin:40px 0 59px;
    display:flex;
}
.myclass-lecture-info .thumb {
	overflow:hidden;
	width:47.874%;
	border-radius:4px;
    aspect-ratio:25/14;
}
.myclass-lecture-info .thumb img {
	width:100%;
    height:100%;
    object-fit:cover;
}
.myclass-lecture-info .myclass-lecture-info-txt {
	padding-left:40px;
	width:calc(100% - 47.874%);
}
.myclass-lecture-info .myclass-lecture-info-txt .tit {
	font-weight:700; font-size:22px;
	color:var(--color-dark-gray, #333);
}
.myclass-lecture-info .myclass-lecture-info-txt .tit span {
	display:block;
	font-weight:400; font-size:16px;
	color:var(--color-gray, #aaa);
}
.myclass-lecture-info .myclass-lecture-info-txt .progress {
	margin:30px 0 20px;
	font-size:0;
}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl {
	margin-bottom:7px;
}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dt,
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dd {
	display:inline-block;
	vertical-align:middle;
}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dt {
	font-weight:400;
	font-size:16px;
	color:var(--color-dark-gray, #333);
}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dd {
	margin-left:5px;
	font-weight:700;
	font-size:20px;
}
.myclass-lecture-info .myclass-lecture-info-txt .progress dl dd span {
	font-size:16px;
}
.myclass-lecture-info .myclass-lecture-info-txt .progress-bar {
	position:relative;
	display:block;
	width:100%; height:6px;
	background:#f5f5f7;
}
.myclass-lecture-info .myclass-lecture-info-txt .progress-bar .bar {
	position:absolute; top:0; left:0;
	height:6px;
	background:var(--color-primary, #0148d4);
}
.myclass-lecture-info .myclass-lecture-info-txt .btn-area li {
	/* width:calc(50% - 5px); */
    width:25%;
}
/* .myclass-lecture-info .myclass-lecture-info-txt .btn-area li + li {
	margin-left:10px;
} */
.myclass-lecture-info .myclass-lecture-info-txt .btn-area li button {
	/* width:100%;
	font-weight:700;  */
}
.myclass-lecture-info .myclass-lecture-info-txt .btn-area li:nth-child(2) ,
.myclass-lecture-info .myclass-lecture-info-txt .btn-area li:nth-child(3) {
	/* width:calc(25% - 8px); */
}
.myclass-lecture-info .myclass-lecture-info-txt .btn-area :is(li:nth-child(2), li:nth-child(3)) button {
	width:100%;
	font-weight:500; 
    font-size:14px;
    height:50px;
    padding:0;
    word-break:keep-all;
}
.myclass-lecture-info .myclass-lecture-info-txt .btn-area li:first-child {
    width:50%;
}
.myclass-lecture-info .myclass-lecture-info-txt .btn-area li:first-child :is(a, button) {
	width:100%;
	font-weight:700; 
}

.myclass-lecture-info .btn-area {
    flex-wrap:nowrap; gap:10px;
}

@media only screen and (max-width:1024px) {
	.myclass-detail .myclass-banner {
		display:none;
	}
}
@media only screen and (max-width:980px) {
	.myclass-lecture-info .thumb {
		width:40%;
	}
	.myclass-lecture-info .myclass-lecture-info-txt {
		padding-left:3%;
		width:60%;
	}
}
@media only screen and (max-width:850px) {
	.myclass-lecture-info .thumb {
		display:none;
		width:47.874%;
	}
	.myclass-detail .myclass-lecture-info {
		margin-top:30px;
		border-top:1px solid var(--color-dark-gray, #333);
	}
	.myclass-lecture-info .myclass-lecture-info-txt {
		margin-top:20px;
		padding-left:0;
		width:100%;
	}
}
@media only screen and (max-width:767px) {
	.myclass-lecture-info .myclass-lecture-info-txt .tit span {
		font-size:14px;
	}
	.myclass-lecture-info .myclass-lecture-info-txt .progress {
		margin:10px 0 15px;
	}
	.myclass-lecture-info .myclass-lecture-info-txt .progress dl dt {
		font-size:14px;
	}
	.myclass-lecture-info .myclass-lecture-info-txt .progress dl dd {
		font-size:17px;
	}
	.myclass-lecture-info .myclass-lecture-info-txt .progress dl dd span {
		font-size:14px;
	}
    .myclass-lecture-info .btn-area {
        flex-wrap:nowrap; gap:6px;
    }
	/* .myclass-lecture-info .myclass-lecture-info-txt .btn-area li + li {
		margin-left:6px;
	}
	.myclass-lecture-info .myclass-lecture-info-txt .btn-area li:nth-child(2), 
	.myclass-lecture-info .myclass-lecture-info-txt .btn-area li:nth-child(3) {
		width:calc(25% - 3px);
	} */
	.myclass-lecture-info .myclass-lecture-info-txt .btn-area :is(li:nth-child(2), li:nth-child(3)) button {
		font-size:12px;
        height:40px;
        padding:0;
	}
}


.myclass-detail .myclass-detail-tab {
	border-bottom:1px solid #eee;
	font-size:0;
}
.myclass-detail .myclass-detail-tab li {
	position:relative;
	display:inline-block;
	margin-right:40px;
	vertical-align:top;
}
.myclass-detail .myclass-detail-tab li a {
	display:block;
	font-size:20px; line-height:40px;
	color:var(--color-dark-gray, #333);
}
.myclass-detail .myclass-detail-tab li.on a:after {
	content:'';
	position:absolute; bottom:-1px; left:0;
	width:100%; height:4px;
	background:var(--color-primary, #0148d4);
}

.myclass-detail .myclass-detail-sub-tab {
	width:100%;
	background:#f5f5f7;
	font-size:0;
    overflow-x:hidden;
}
.myclass-detail .myclass-detail-sub-tab .swiper-slide {
	position:relative;
	display:inline-block;
	padding:0 20px;
	width:auto;
	vertical-align:top;
}
.myclass-detail .myclass-detail-sub-tab .swiper-slide a {
	display:block;
	font-size:18px; line-height:80px;
	color:var(--color-gray, #aaa);
}
.myclass-detail .myclass-detail-sub-tab .on a {
	font-weight:500;
	color:var(--color-dark-gray, #333);
}
.myclass-detail .myclass-detail-sub-tab .swiper-slide a:after {
	content:'';
	position:absolute; top:50%; right:0;
	margin-top:-9px;
	width:1px; height:18px;
	background:var(--color-gray, #aaa);
}
.myclass-detail .myclass-detail-sub-tab .swiper-slide:last-child a:after {
	display:none;
}

.myclass-detail-conts-wrap {
}
.myclass-detail-conts-wrap .myclass-list-tit {
	margin-top:65px;
	margin-bottom:20px;
	font-weight:700; font-size:24px;
	color:var(--color-dark-gray, #333);
}
.myclass-detail-conts-wrap .myclass-list-tit span {
	display:block;
	font-weight:500; font-size:16px;
	color:var(--color-primary, #0148d4);
}
.myclass-detail-conts-wrap .myclass-list {
	border-top:1px solid #eee;
}
.myclass-list-box {
	padding:10px 0;
	border-bottom:1px solid #eee;
    display:flex;
}
.myclass-list-box > * {
	line-height:38px;
}
.myclass-list-box .tit {
	font-size:17px;
	color:var(--color-dark-gray, #333);
    flex-grow:1;
}
.myclass-list-box .tit span:not(.lecture-password) {
	position:relative; top:-1px;
	display:inline-block;
	margin-left:20px; padding:0 11px;
	border:1px solid var(--color-primary, #0148d4);
	border-radius:13px;
	font-size:14px; line-height:23px;
	color:var(--color-primary, #0148d4);
	vertical-align:middle;
}
.myclass-list-box .tit strong {
	font-weight:500;
	color:var(--color-red, #dc3545);
}
.myclass-list-box ul {
	font-size:0;
}
.myclass-list-box ul li {
	display:inline-block;
	font-size:16px;
	vertical-align:middle;
}
.myclass-list-box .etc {
	width:200px;
    flex-shrink:0;
}
.myclass-list-box .etc li {
	width:50%;
}
.myclass-list-box .etc .time {
	font-weight:300; font-size:16px;
	color:var(--color-gray, #aaa);
	text-align:left;
}
.myclass-list-box .etc .time img {
	position:relative; top:-1px;
	display:inline-block;
	margin-right:10px;
	vertical-align:middle;
}
.myclass-list-box .etc .progress {
	font-weight:700; 
	color:var(--color-dark-gray, #333);
	text-align:center;
}
.myclass-list-box .play-btn {
	margin-left:20px;
	width:198px;
    flex-shrink:0;
    display:flex;
    align-items:flex-start;
    justify-content:flex-end;
}
.myclass-list-box .play-btn li {
	margin-left:10px;
	width:94px;
}
.myclass-list-box .play-btn li:first-child {
	margin-left:0;
}
.myclass-list-box .play-btn li [class^="btn"] {
	width:100%; 
}
.myclass-list-box .play-btn li [class^="btn"] img {
	position:relative; top:-1px;
	display:inline-block;
	margin-right:5px;
	vertical-align:middle;
}
.myclass-list-box .lecture-password {display:block; line-height:1.2em; font-size:15px;}
.play-btn a:disabled,
.play-btn button:disabled {pointer-events:none;}

.tab-conts-wrap {display:none;}
.tab-conts-wrap.on {display:block;}
@media only screen and (max-width:1180px) {
	.myclass-detail .myclass-detail-sub-tab {
		position:relative;
	}
	.myclass-detail .myclass-detail-sub-tab:before {
		content:'';
		position:absolute; bottom:100%; left:100%;
		width:100%; height:1px;
		background:#eee;
	}
	.myclass-detail .myclass-detail-sub-tab:after {
		content:'';
		position:absolute; top:0; left:100%;
		width:100%; height:100%;
		background:#f5f5f7;
	}
}
@media only screen and (max-width:850px) {
	.myclass-list-box {
		padding:10px 0 20px;
        flex-direction:column;
	}
	.myclass-list-box > * {
		display:block;
	}
	.myclass-list-box .tit {
		width:100%;
	}
	.myclass-list-box .play-btn {
		margin-left:0;
        justify-content:flex-start;
	}
}
@media only screen and (max-width:767px) {
	.myclass-detail .myclass-detail-tab li {
		margin-right:25px;
	}
	.myclass-detail .myclass-detail-tab li a {
		font-size:16px; line-height:35px;
	}

	.myclass-detail .myclass-detail-sub-tab {
		padding:0 10px;
	}
	.myclass-detail .myclass-detail-sub-tab .swiper-slide {
		padding:0 10px;
	}
	.myclass-detail .myclass-detail-sub-tab .swiper-slide a {
		font-size:15px; line-height:60px;
	}
	.myclass-detail .myclass-detail-sub-tab .swiper-slide a:after {
		margin-top:-7px;
		height:14px;
	}

	.myclass-list-box > * {
		line-height:20px;
	}
	.myclass-list-tit {
		margin-top:30px; margin-bottom:10px;
		font-size:18px;
	}
	.myclass-list-tit span {
		font-size:14px;
	}
	.myclass-list-box .tit {
		font-size:15px;
	}
	.myclass-list-box .tit span:not(.lecture-password) {
		margin-left:10px;
		padding:0 8px;
		font-size:12px; line-height:18px;
	}
	.myclass-list-box .etc {
		margin:9px 0 12px;
	}
	.myclass-list-box .play-btn li {
		width:85px;
	}
	.myclass-list-box .play-btn li button {
		height:36px;
		font-size:12px;
	}
    .myclass-list-box .lecture-password {margin-top:5px; font-size:13px;}
}


/* popup */
.popup-wrap:is(.result,.lecture-content) .popup-inner {
	max-height:560px;
}

.popup-wrap .result-wrap {
	margin-top:40px;
	border-top:1px solid var(--color-light-gray, #ccc);
    height:calc(100% - 70px);
    overflow-y:auto;
}
.popup-wrap .result-wrap .result-box {
	padding:20px 0;
	border-bottom:1px solid var(--color-light-gray, #ccc);
	font-size:0;
}
.popup-wrap .result-wrap .result-box dl {
	display:inline-block;
	width:calc(100% - 94px);
	vertical-align:top;
}
.popup-wrap .result-wrap .result-box dl dt {
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
}
.popup-wrap .result-wrap .result-box dl dd {
	font-size:14px;
	color:var(--color-gray, #aaa);
}
.popup-wrap .result-wrap .result-box dl dd > span,
.popup-wrap .result-wrap .result-box dl dd > strong {
	font-weight:700; font-size:24px;
}
.popup-wrap .result-wrap .result-box dl dd > span {
	color:var(--color-gray, #aaa);
}
.popup-wrap .result-wrap .result-box dl dd > strong {
	color:var(--color-dark-gray, #333);
}
.popup-wrap .result-wrap .result-box dl dd > span span,
.popup-wrap .result-wrap .result-box dl dd > strong span {
	font-size:16px;
}
.popup-wrap .result-wrap .result-box dl dd:last-child {
	margin-top:10px;
}
.popup-wrap .result-wrap .result-box .btn-wrap {
	display:inline-block;
	width:94px;
	vertical-align:top;
}
.popup-wrap .result-wrap .result-box .btn-wrap button {
	width:100%; height:40px;
	border-radius:4px;
	background:var(--color-primary, #0148d4);
	font-weight:500; font-size:14px;
	color:#fff;
}

.popup-wrap .result-wrap .no-data {
    text-align:center;
    min-height:180px;
}
@media only screen and (max-width:767px) {
    .popup-wrap .result-wrap {
        height:calc(100vh - 200px);
    }
}

/* 결제하기
------------------------------------------------------ */
.order-wrap {
	position:relative;
	/* font-size:0; */
}

.order-wrap .order-tit {
	display:block;
	margin-bottom:75px;
	font-weight:700; font-size:28px;
	color:var(--color-dark-gray, #333);
	text-align:center;
}

.order-wrap .order-conts-tit {
	display:block;
	margin-top:60px;
	padding-bottom:15px;
	/* border-bottom:1px solid var(--color-dark-gray, #333); */
	font-weight:700; font-size:24px;
	color:var(--color-dark-gray, #333);
}
.order-wrap .order-conts-tit:first-child {
	margin-top:0;
}

.order-wrap .goods-info-wrap {
}
.goods-info-wrap .goods-info-box {
	padding:30px 10px 25px;
	border-bottom:1px solid var(--color-dark-gray, #333);
    display:flex;
    justify-content:space-between;
}
.goods-info-wrap .goods-info {
    flex-grow:1;
}
.goods-info-wrap .goods-info-box .sub-tit {
	font-size:0;
}
.goods-info-wrap .goods-info-box .sub-tit li {
	position:relative;
	display:inline-block;
	padding:0 10px;
	font-size:16px;
	color:var(--color-dark-gray, #333);
	vertical-align:middle;
}
.goods-info-wrap .goods-info-box .sub-tit li:first-child {
	padding-left:0;
}
.goods-info-wrap .goods-info-box .sub-tit li + li:before {
	content:'';
	position:absolute; top:50%; left:0;
	margin-top:-7px;
	width:1px; height:14px;
	background:#ddd;
}
.goods-info-wrap .goods-info-box .sub-tit li strong {
	font-weight:700;
	color:var(--color-primary, #0148d4);
}
.goods-info-wrap .goods-info-box .sub-tit .teacher-name {color:var(--color-primary, #0148d4);}
.goods-info-wrap .goods-info-box .tit {
	margin:10px 0 15px;
	font-weight:700; font-size:22px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.goods-info-wrap .goods-info-box .date {
	font-size:16px;
	color:var(--color-gray, #aaa);
}
.goods-info-wrap .goods-info-box .book-info {
	font-size:0;
}
.goods-info-wrap .goods-info-box .book-info li {
	position:relative;
	display:inline-block;
	padding:0 5px;
	font-weight:300; font-size:14px;
	color:var(--color-gray, #aaa);
	vertical-align:middle;
}
.goods-info-wrap .goods-info-box .book-info li:first-child {
	padding-left:0;
}
.goods-info-wrap .goods-info-box .book-info li:after {
	content:'';
	position:absolute; top:50%; right:0;
	margin-top:-7px;
	width:1px; height:14px;
	background:#b7b7b7;
}
.goods-info-wrap .goods-info-box .book-info li:last-child:after {
	display:none;
}
.goods-info-wrap .goods-info-box dl {
	margin-bottom:25px;
	font-size:0;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
	padding:3px 0;
}
.goods-info-wrap .goods-info-box dl + dl {margin-top:0;}
.goods-info-wrap .goods-info-box dl :is(dt,dd) {
	display:inline-block;
	font-size:16px;
	vertical-align:top;
}
.goods-info-wrap .goods-info-box dl dt {
	width:100px;
	font-weight:400;
	color:var(--color-gray, #aaa);
}
.goods-info-wrap .goods-info-box dl dd {
	width:calc(100% - 100px);
	color:var(--color-dark-gray, #333);
	text-align:left;
}
.goods-info-wrap .goods-info-box dl dd strong {
	font-weight:700;
}
.goods-info-wrap .goods-info-box dl dd span + button {
    margin-left:10px;
}
.goods-info-wrap .goods-info-box dl dd button {
    padding:6px 10px 7px;
}
.goods-info-wrap .goods-info-box dl dd.refund-box {
    display:flex;
    align-items:center;
}
.goods-info-wrap .good-img {
	width:220px;
	text-align:right;
    flex-shrink:0;
}
.goods-info-wrap .good-img img {
	max-width:100%;
}
.goods-info-wrap .good-img.books img {
	max-width:170px;
}

.order-wrap .order-box {
	display:inline-block;
	width:calc(100% - 420px);
	vertical-align:top;
}
.order-wrap .order-form-wrap {
}
.order-form-wrap .shipping-addr {
	margin:20px 0 50px;
	font-size:0;
}
.order-form-wrap .shipping-addr > * {
	display:inline-block;
	vertical-align:middle !important;
}
.order-form-wrap .shipping-addr .checkbox-wrap {
	width:calc(100% - 150px);
}

.order-form-wrap .input-form label {
	display:block;
	margin:15px 0 5px;
	font-size:15px;
	color:var(--color-primary, #0148d4);
}
.order-form-wrap .input-form input[type="text"] {
	padding:0;
	width:100%; height:40px;
	border:0 none;
	border-bottom:1px solid var(--color-light-gray, #ccc);
	font-size:18px;
	color:var(--color-dark-gray, #333);
}
.order-form-wrap .input-form input[type="text"].box-type {
	padding:0 20px;
	height:50px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
}
.order-form-wrap .input-form label input::placeholder {
	color:var(--color-gray, #aaa);
}
.order-form-wrap .input-form input[type="text"].box-type::placeholder {
	color:var(--color-dark-gray, #333);
}
.order-form-wrap .input-form .address-wrap {
	height:auto;
	font-size:0;
}
.order-form-wrap .input-form .address-wrap .input-addr {
	display:inline-block;
	padding:0 11px;
	border-radius:4px;
	border-bottom:0 none;
	background:#eee;
	vertical-align:top;
}
.order-form-wrap .input-form .address-wrap .input-addr:first-child {
	margin-right:10px;
	width:calc(100% - 150px);
}
.order-form-wrap .input-form .address-wrap .input-addr:nth-child(3) {	
	margin:10px 0;
}
.order-form-wrap [class^="btn"] {
	display:inline-block;
	width:140px;
}
.order-form-wrap .input-form .address-wrap input.box-type {
	padding:0 20px;
	width:100%; height:50px;
	border:1px solid var(--color-light-gray, #ccc);
	border-radius:4px;
	font-size:18px;
	color:var(--color-dark-gray, #333);
}

.order-form-table {
	width:100%;
	table-layout:fixed;
}
.order-form-table tr {
	border-bottom:1px solid #ddd;
}
.order-form-table tr:last-child {
	border-bottom-color:var(--color-dark-gray, #333);
}
.order-form-table :is(th,td) {
	padding:15px 10px;
	height:80px;
	vertical-align:middle;
}
.order-form-table th {
	font-weight:400; font-size:18px;
	color:var(--color-dark-gray, #333);
	text-align:left;
}
.order-form-table .vAt {
	vertical-align:top;
}

.order-form-table.coupon th {
	padding-top:30px;
	vertical-align:top;
}
.order-form-table.coupon input {
	text-align:right;
}
.order-form-table .btn-coupon {
	display:inline-block;
	margin-left:10px;
	width:140px;
}
.order-form-table.coupon input[type="text"] {
	display:inline-block;
	padding:0 10px;
	/* width:calc(100% - 34px); */
    width:100%;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
	font-weight:700; font-size:22px; line-height:48px;
	color:var(--color-dark-gray, #333);
	text-align:right;
	vertical-align:middle;
}

.order-form-table.coupon .point {
	font-size:0;
}
.order-form-table.coupon .point .checkbox-wrap {
	display:inline-block;
	vertical-align:middle;
}
.order-form-table.coupon .point .checkbox-wrap input {
	display:none;
}
.order-form-table.coupon .point .checkbox-wrap label {
	margin-left:10px; 
	font-size:0;
}
.order-form-table.coupon .point .checkbox-wrap label:before {
	margin-right:0;
}
.order-form-table.coupon .point [class^="btn"] {
	margin-left:10px;
	width:auto;
	padding:1px 4px 0px;
}
.order-form-table.coupon td div {
	display:block;
	margin-top:7px;
	font-size:14px;
	color:var(--color-dark-gray, #333);
	text-align:right;
}
.order-form-table.coupon td div em {
	font-style:normal;
	color:#779df5;
}
.order-form-table .checkbox-wrap {
	/* font-size:0; */
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px;
}
.order-form-table .checkbox-wrap li {
	/* display:inline-block;
	margin-right:20px;
	vertical-align:top; */
}
.order-form-table .checkbox-wrap li:last-child {
	margin-right:0;  
}
.order-form-table .checkbox-wrap label img {
	position:relative; top:-2px;
	display:inline-block;
	vertical-align:middle;
}
.order-form-table select {
	display:inline-block;
	padding-left:55px;
	width:calc(100% - 155px); 
	/* height:50px;
	border:1px solid var(--color-light-gray, #ccc);
	border-radius:4px;
	font-size:18px;
	color:var(--color-dark-gray, #333);
	vertical-align:top; */
}
.order-form-table select + input {
	display:inline-block;
	margin-left:10px;
	width:140px; height:50px;
	border-radius:4px;
	border:1px solid var(--color-light-gray, #ccc);
	font-size:18px;
	color:var(--color-dark-gray, #333);
	text-align:center;
	vertical-align:top;
}
.order-form-table .checkbox-wrap label span {
	display:block;
	padding-left:34px;
	font-size:16px;
	color:var(--color-gray, #aaa);
}
.order-form-table .checkbox-wrap label span a {
	display:inline-block;
	font-size:14px;
	color:#ff8e20;
	vertical-align:middle;
}
.order-form-table .checkbox-wrap input:checked + label {
	font-size:700;
	color:var(--color-dark-gray, #333);
}
.order-form-table .checkbox-wrap input:checked + label span {
	font-weight:400;
}
.order-form-table td .desc {
	display:block;
	margin-top:7px;
	font-size:14px;
	color:var(--color-dark-gray, #333);
}

.order-wrap .payment-info {
	position:relative;
	display:inline-block;
	margin-left:36px;
	width:380px;
	vertical-align:top;
}

.mypage-wrap .order-wrap {margin-top:30px;}

@media only screen and (min-width:1025px) {
	.order-wrap .payment-info.fixed {
		position:fixed; top:0;
		margin-top:100px;
	}
	.order-wrap .payment-info.on {
		position:absolute; top:auto; bottom:0;
		margin-top:0;
	}
}
.order-wrap .payment-info .order-conts-tit {
	border-bottom:0 none;
}
.order-wrap .payment-inner {
	padding:30px;
	border-radius:4px;
	border:1px solid #ddd;
	background:#fff;
}
.order-wrap .payment-info dl {
	font-size:0;
}
.order-wrap .payment-info dl :is(dt,dd) {
	display:inline-block;
	vertical-align:top;
}
.order-wrap .payment-info dl dd {
	text-align:right;
}

.order-wrap .payment-info .info + .info {
	margin-top:15px;
	padding-top:15px;
	border-top:1px solid var(--color-light-gray, #ccc);
}
.order-wrap .payment-info .info :is(dt,dd) {
	margin:3px 0;
	font-weight:400; font-size:16px;
	color:var(--color-dark-gray, #333);
}
.order-wrap .payment-info .info dt {
	width:100px;
}
.order-wrap .payment-info .info dd {
	width:calc(100% - 100px);
	font-weight:500; font-size:18px;
	color:var(--color-gray, #aaa);
}
.order-wrap .payment-info .info dd strong {
	font-weight:700;
	color:var(--color-dark-gray, #333);
}
.order-wrap .payment-info .info dd span {
	font-size:16px;
}
.font-red {
	color:var(--color-red, #dc3545) !important;
}
.order-wrap .payment-info .total {
	margin:20px 0 30px;
	padding:20px 0;
	border-top:1px solid #ddd;
	border-bottom:2px solid var(--color-dark-gray, #333);
}
.order-wrap .payment-info .total dt,
.order-wrap .payment-info .total dd {
	width:50%;
	font-size:22px;
	color:var(--color-dark-gray, #333);
	vertical-align:middle;
}
.order-wrap .payment-info .total dd strong {
	font-weight:700;
	font-size:28px;
	word-break:break-all;
}
.order-wrap .payment-info.end .total dd strong {
	color:var(--color-primary, #0148d4);
}

.order-wrap .payment-info .payment-btn {
}
.order-wrap .payment-info .payment-btn li {
	display:block;
	margin-top:10px;
}
.order-wrap .payment-info .payment-btn li a {
	display:block;
	width:100%; 
    padding:15px 15px 16px;
    font-size:18px; 
}
.order-wrap .payment-info .payment-btn li:last-child a {
	color:var(--color-dark-gray, #333);
}

.order-table {
	width:100%;
	border-bottom:1px solid var(--color-dark-gray, #333);
	table-layout:fixed;
}
.order-table :is(th,td) {
	padding-top:10px; padding-bottom:10px;
}
.order-table th {
	padding-left:10px;
	font-size:16px;
	color:var(--color-gray, #aaa);
	text-align:left;
}
.order-table td {	
	font-size:18px;
	color:var(--color-dark-gray, #333);
}
.order-table tr:first-child :is(th,td) {
	padding-top:25px;
}
.order-table tr:last-child :is(th,td) {
	padding-bottom:25px;
}
.order-table .total-price {color:var(--color-primary, #0148d4); font-size:28px;}
.order-table .expire-date {color:var(--color-red, #dc3545)}

@media only screen and (max-width:1024px) {
	.order-wrap .order-box {
		width:100%;
	}

	.order-wrap .payment-info {
		margin-top:40px; margin-left:0;
		width:100%;
	}
}
@media only screen and (max-width:767px) {
	.order-wrap .order-tit {
		margin-bottom:35px;
		font-size:20px;
	}

	.goods-info-wrap .goods-info-box {
		padding:20px 5px 15px;
	}
	.goods-info-wrap .good-img {
		width:100px;
	}
	.goods-info-wrap .good-img.books img {
		max-width:100%;
	}
	.goods-info-wrap .goods-info-box .sub-tit li {
		padding:0 7px;
		font-size:14px;
	}
	.goods-info-wrap .goods-info-box .sub-tit li:after {
		margin-top:-5px;
		height:10px;
	}
	.goods-info-wrap .goods-info-box .tit {
		margin:5px 5px 10px 0;
		font-size:16px; line-height:1.3;
	}
	.goods-info-wrap .goods-info-box .date {
		font-size:14px;
	}
	.goods-info-wrap .goods-info-box dl {
		margin-top:15px;
	}
	.goods-info-wrap .goods-info-box dl :is(dt,dd) {
		margin:2px 0;
		font-size:14px;
	}

	.order-form-wrap .input-form label {
		font-size:13px;
	}
	.order-form-wrap .input-form input[type="text"] {
		font-size:15px; line-height:35px;
	}

	.order-form-wrap .shipping-addr {
		margin:10px 0 30px;
	}
	.order-form-wrap .input-form input[type="text"] {
		height:35px;
	}
	.order-form-wrap [class^="btn"] {
		width:120px;
	}
	.order-form-wrap .shipping-addr .checkbox-wrap {
		width:calc(100% - 120px);
	}

	.order-form-wrap .input-form .address-wrap .input-addr:first-child {
		margin-right:5px;
		width:calc(100% - 125px);
	}
	.order-form-wrap .input-form input[type="text"].box-type {
		padding:0 10px;
		height:40px;
	}

	.order-form-table.coupon colgroup {
		display:none;
	}
	.order-form-table.coupon th {
		width:70px;
	}
	.order-form-table select {
		padding-left:10px;
		width:calc(100% - 105px);
		/* height:40px; */
		font-size:13px;
	}
	.order-form-table .btn-coupon {
		margin-left:5px;
		width:95px; 
	}
	.order-form-table select + input {
		margin-left:5px;
		width:95px; height:40px;
		font-size:15px; line-height:40px;
	}
	.order-form-table.coupon input[type="text"] {
		font-size:18px; line-height:38px;
	}
	.order-form-table.coupon td div,
	.order-form-table.coupon .point [class^="btn"] {
		font-size:12px;
	}
	.order-form-table.payment colgroup {
		display:none;
	}
	.order-form-table.payment :is(th,td) {
		display:block;
		width:100%; height:auto;
	}
	.order-form-table th {
		padding-bottom:0;
		font-size:15px;
	}
	/* .order-form-table .checkbox-wrap {
		margin-bottom:-10px;
	} */
	/* .order-form-table .checkbox-wrap li {
		margin-left:0; margin-bottom:10px;
		width:50%;
	} */
    .order-form-table .checkbox-wrap {flex-direction:column;}
	.order-form-table .checkbox-wrap label span {
		margin:3px 0;
		padding-left:23px;
	}
	.order-form-table .checkbox-wrap label span:first-child {
		margin-top:5px;
	}
	.order-form-table .checkbox-wrap label span:last-child {
		margin-bottom:8px;
	}


	.order-wrap .order-conts-tit {
		margin-top:30px; padding-bottom:10px;
		font-size:18px;
	}
	.order-table th, 
	.order-table td {
		padding-top:5px; padding-bottom:5px;
	}
	.order-table th {
		font-size:14px;	
	}
	.order-table td {
		font-size:15px;
	}
	.order-table tr:first-child :is(th,td) {
		padding-top:15px;
	}
	.order-table tr:last-child :is(th,td) {
		padding-bottom:15px;
	}

	.order-wrap .payment-inner {
		padding:20px;
	}
	.order-wrap .payment-info .info + .info {
		margin-top:8px;
		padding-top:8px
	}
	.order-wrap .payment-info .info :is(dt,dd) {
		font-size:14px;
	}
	.order-wrap .payment-info .info dt {
		width:80px;
	}
	.order-wrap .payment-info .info dd {
		width:calc(100% - 80px);
	}

	.order-wrap .payment-info .total {
		margin:15px 0 20px;
		padding:15px 0;
	}
	.order-wrap .payment-info .total :is(dt,dd) {
		font-size:18px;
	}
	.order-wrap .payment-info .total dd strong {
		font-size:22px;
	}

	.order-wrap .payment-info .payment-btn li {
		margin-top:7px;
	}
	.order-wrap .payment-info .payment-btn li a {
		font-size:15px;
        padding:10px 15px 11px;
	}
}

/* coupon */
.popup-box {
	position:fixed; top:50%; left:50%;
	transform:translate(-50%,-50%);
	padding:40px;
	width:560px; height:290px;
	border-radius:10px;
	border:1px solid var(--color-light-gray, #ccc);
	background:#fff;
	display:none;
}
.popup-box .popup-tit {
	display:block;
	margin-bottom:45px;
	font-weight:500; font-size:24px; line-height:1;
	color:var(--color-dark-gray, #333);
	text-align:left;
}
.popup-box input {
	width:100%; height:60px;
	border:1px solid var(--color-light-gray, #ccc);
	border-radius:4px;
	font-weight:700; font-size:22px;
	color:var(--color-dark-gray, #333);
	letter-spacing:3px;
	text-align:center;
}
.popup-box button {
	margin-top:20px;
	width:100%; 
}
:where(.popup-box,.popup-wrap) .close {
	position:absolute; top:37px; right:37px;
	width:42px; height:42px;
	font-size:0;
}
:where(.popup-box,.popup-wrap) .close:before,
:where(.popup-box,.popup-wrap) .close:after {
	content:'';
	position:absolute; top:50%; left:0;
	z-index:111;
	width:100%; height:2px;
	border-radius:5px;
	background:var(--color-gray, #aaa);
}
:where(.popup-box,.popup-wrap) .close:before {
	transform:rotate(45deg);
}
:where(.popup-box,.popup-wrap) .close:after {
	transform:rotate(-45deg);
}

@media only screen and (max-width:767px) {
	.popup-box {
		padding:25px 20px;
		width:calc(100% - 40px);
		max-width:560px;
		height:auto;
	}

	.popup-box .popup-tit {
		margin-bottom:30px;
		font-size:18px;
	}
	.popup-box input {
		height:45px;
		font-size:18px;
	}
	.popup-box button {
		margin-top:10px;
	}

	:where(.popup-box,.popup-wrap) .close {
		top:17px; right:17px;
		width:32px; height:32px;
	}
}



/* popup */
.popup-wrap {
	position:fixed; top:0; left:0; bottom:0; right:0;
	z-index:99999;
	width:100%; height:100%;
	background:rgba(0,0,0,.8);
}
.popup-wrap .popup-inner {
	position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%);
	padding:40px;
	max-width:560px; width:calc(100% - 60px);
	max-height:800px; height:calc(100% - 60px);
	border-radius:10px;
	background:#fff;
}
.popup-wrap .popup-tit {
	font-weight:500; font-size:24px;
	color:var(--color-dark-gray, #333);
}

.popup-wrap .addr-list {
	border-top:1px solid var(--color-light-gray, #ccc);
}
.popup-wrap .addr-list .addr-box {
	padding:15px 0;
	border-bottom:1px solid var(--color-light-gray, #ccc);
	font-size:0;
}
.popup-wrap .addr-list .addr-box > * {
	display:inline-block;
	vertical-align:middle;
}
.popup-wrap .addr-list .addr-info {
	width:calc(100% - 24px);     
}
.popup-wrap .addr-list .addr-info > * {
	font-size:16px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.popup-wrap .addr-list .addr-info .name {
	font-weight:700;
}
.popup-wrap .addr-list .addr-info .address {
	line-height:1.2;
}
.popup-wrap .addr-list .addr-info .msg {
	margin-top:7px;
}
.popup-wrap .addr-list .checkbox {
	width:24px;
}
.popup-wrap .addr-list .checkbox input {
	display:none;
}
.popup-wrap .addr-list .checkbox label {
	display:inline-block;
	width:24px; height:24px;
	border:1px solid var(--color-light-gray, #ccc);
	border-radius:50%;
	font-size:0;
	vertical-align:middle;
	cursor:pointer;
}
.popup-wrap .addr-list .checkbox input:checked + label {
	border:8px solid var(--color-primary, #0148d4);
}

.popup-wrap .popup-btn {
	width:100%;
}
.popup-wrap .popup-btn a {
	display:block;
}
.popup-wrap .popup-btn {
	display:flex;
}
.popup-wrap .popup-btn button + button {
	margin-left:10px;
}

.popup-wrap.refund-order .popup-inner {
    /* max-height:740px; */
}
.popup-wrap .popup-contents-wrap {
    margin-top:30px;
    height:calc(100% - 178px);
}
.popup-wrap .popup-scroll {
    overflow-x:hidden;
}
.popup-wrap .lecture-content-area {
    margin:15px 10px;
}

@media only screen and (max-width:767px) {
	.popup-wrap .popup-tit {
		font-size:18px;
	}
	.popup-wrap .popup-inner {
		padding:25px;
		max-height:calc(100vh - 100px);
		height:auto;
	}

	.popup-wrap .addr-list {
		margin:25px 0;
	}
	.popup-wrap .addr-list .addr-box {
		padding:10px 0;
	}
	.popup-wrap .addr-list .addr-info > * {
		font-size:14px;
	}

	.popup-wrap:is(.result,.lecture-content) .popup-inner {
		max-height:calc(100% - 60px);
		height:auto;
	}
	.popup-wrap .result-wrap {
		margin-top:20px;
	}
	.popup-wrap .result-wrap .result-box {
		padding:15px 0;
	}
	.popup-wrap .result-wrap .result-box dl {
		width:100%;
	}
	.popup-wrap .result-wrap .result-box dl dt {
		font-size:16px;
	}
	.popup-wrap .result-wrap .result-box dl dd {
		font-size:12px;
	}
	.popup-wrap .result-wrap .result-box dl dd > span, 
	.popup-wrap .result-wrap .result-box dl dd > strong {
		font-size:18px;
	}
	.popup-wrap .result-wrap .result-box dl dd:last-child {
		margin-top:5px;
	}
	.popup-wrap .result-wrap .result-box dl dd > span span, 
	.popup-wrap .result-wrap .result-box dl dd > span strong {
		font-size:14px;
	}
	.popup-wrap .result-wrap .result-box .btn-wrap {
		margin-top:15px;
		width:80px;
	}
	.popup-wrap .result-wrap .result-box .btn-wrap button {
		height:35px;
		font-size:12px;
	}

	.popup-wrap .close {
		top:17px; right:17px;
		width:32px; height:32px;
	}

    .popup-wrap .popup-contents-wrap {
        margin-bottom:10px;
        height:calc(100vh - 282px);
    }
    .popup-wrap .lecture-content-area {
        margin:10px;
    }
}

/* leveltest
------------------------------------------------------ */
#leveltestWrap {
	position:relative;
	padding:20px;
	width:100%; min-height:100vh;
	background:var(--color-dark-gray, #333);
}
#leveltestWrap #header {
	position:absolute; top:20px; left:20px;
	width:calc(100% - 40px); height:100px;
	box-shadow:none;
}
#leveltestWrap #header #logo {
	left:20px;
}
#leveltestWrap #header .leveltest-tit {
	position:absolute; top:0; left:50%;
	transform:translateX(-50%);
	font-weight:700; font-size:32px; line-height:100px;
	color:var(--color-dark-gray, #333);
	text-align:center;
}
#leveltestWrap #header .close {
	position:absolute; top:50%; right:20px;
	margin-top:-21px;
	width:42px; height:42px;
	font-size:0;
}
#leveltestWrap #header .close:before,
#leveltestWrap #header .close:after {
	content:'';
	position:absolute; top:50%; left:0;
	width:100%; height:2px;
	border-radius:5px;
	background:var(--color-gray, #aaa);
}
#leveltestWrap #header .close:before {
	transform:rotate(45deg);
}
#leveltestWrap #header .close:after {
	transform:rotate(-45deg);
}

#leveltestWrap #contents {
	overflow:hidden;
	padding:100px 0;
	width:100%; min-height:calc(100vh - 40px);
	background:#fff;
}

@media only screen and (max-width:950px) {
	#leveltestWrap {
		padding:0;
	}
	#leveltestWrap #header {
		top:0; left:0;
		width:100%;
	}
	#leveltestWrap #header #logo {
		display:none;
	}
	#leveltestWrap #header .leveltest-tit {
		left:20px;
		transform:none;
		text-align:left;
	}
	#leveltestWrap #contents {
		min-height:100vh;
	}
}
@media only screen and (max-width:768px) {
	#leveltestWrap #header {
		height:60px;
	}
	#leveltestWrap #header.fixed {
		position:fixed;
	}
	#leveltestWrap #header .leveltest-tit {
		left:15px;
		font-size:18px; line-height:60px;
	}
	#leveltestWrap #contents {
		padding:60px 0 0;
	}
	
	
	#leveltestWrap #header .close {
		right:10px;
		margin-top:-13px;
		width:26px; height:26px;
	}
}


.leveltest-conts-wrap .leveltest-conts {
	position:relative;
}
.leveltest-conts-wrap .leveltest-conts .leveltest-conts-inner {
	margin:0 auto;
	width:800px;
}

@media only screen and (max-width:880px) {
	.leveltest-conts-wrap .leveltest-conts .leveltest-conts-inner {
		padding:20px 20px 0;
		width:100%;
	}
}
@media only screen and (max-width:768px) {
	.leveltest-conts-wrap .leveltest-conts .leveltest-conts-inner {
		padding-bottom:100px;
	}
	.leveltest-conts-wrap .leveltest01 .leveltest-conts-inner {
		min-height:calc(100vh - 60px);
	}
}

/* 01 */
.leveltest-conts-wrap .leveltest .user-info {
	position:relative; left:-10px;
	margin-bottom:80px;
	width:calc(100% + 20px);
	font-size:0;
}
.leveltest-conts-wrap .leveltest .user-info dl {
	display:inline-block;
	margin:0 5px; padding:8px 0 7px;
	width:calc(25% - 10px);
	border-radius:4px;
	background:#f5f5f7;
	text-align:center;
	vertical-align:top;
}
.leveltest-conts-wrap .leveltest .user-info dl dt {
	display:block;
	font-weight:400; font-size:14px;
	color:var(--color-dark-gray, #333);
}
.leveltest-conts-wrap .leveltest .user-info dl dd {
	display:block;
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
}

.leveltest-conts-wrap .leveltest01 .leveltest-cover img {
	width:100%;
}
.leveltest-conts-wrap .leveltest01 h1 {
	margin-top:25px;
	font-weight:700; font-size:32px;
	color:var(--color-dark-gray, #333);
	text-align:center;
}
.leveltest-conts-wrap .leveltest01 p {
	margin-top:5px;
	font-weight:400; font-size:20px;
	color:var(--color-dark-gray, #333);
	text-align:center;
}
.leveltest-conts-wrap .leveltest .leveltest-button {
	margin-top:40px;
	border-radius:4px;
	width:100%; height:80px;
	border-radius:4px;
	background:var(--color-red, #dc3545);
	font-weight:500; font-size:20px;
	color:#fff;
}

@media only screen and (max-width:768px) {
	.leveltest-conts-wrap .leveltest01 .leveltest-conts-inner {
		background:url('/html/images/sub/leveltest/m_leveltest_cover.png') no-repeat center center;
		background-size:cover;
	}
	.leveltest-conts-wrap .leveltest01 .leveltest-cover img {
		display:none;
	}
	.leveltest-conts-wrap .leveltest .leveltest-button {
		position:absolute; bottom:0; left:0;
		border-radius:0;
		height:60px;
		font-size:15px;
	}

	.leveltest-conts-wrap .leveltest01 h1 {
		margin-top:20vh;
		font-size:22px;
	}
	.leveltest-conts-wrap .leveltest01 p {
		font-size:14px;
	}

	.leveltest-conts-wrap .leveltest01 .user-info {
		position:absolute; left:50%; top:50%;
		transform:translate(-50%,-50%);
		margin-bottom:0; padding:0 30px;
		max-width:400px; 
	}
	.leveltest-conts-wrap .leveltest .user-info dl {
		margin:0 3px;
		padding:15px 0;
		width:calc(25% - 6px);
	}
	.leveltest-conts-wrap .leveltest01 .user-info dl {
		margin:5px; padding:18px 0;
		width:calc(50% - 10px);
	}
	.leveltest-conts-wrap .leveltest .user-info dl dt {
		font-size:9px;
	}
	.leveltest-conts-wrap .leveltest .user-info dl dd {
		font-size:11px;
	}
	.leveltest-conts-wrap .leveltest .user-info {
		margin-bottom:30px;
	}
}

.leveltest-conts-wrap .leveltest02 {
}
.leveltest-conts-wrap .leveltest02 .time {
	margin-bottom:50px;
	padding:0 10px;
	border-radius:10px;
	background:#f5f5f7;
}
.leveltest-conts-wrap .leveltest02 .time dt,
.leveltest-conts-wrap .leveltest02 .time dd {
	display:inline-block;
	font-weight:400; font-size:22px; line-height:60px;
	color:var(--color-dark-gray, #333);
	vertical-align:top;
}
.leveltest-conts-wrap .leveltest02 .time dd {
	font-weight:700;
}

.leveltest-conts-wrap .leveltest .questions {
    position:relative;
	margin-top:95px;
	margin-bottom:25px;
	font-weight:700; font-size:28px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.leveltest-conts-wrap .leveltest .questions:first-of-type {
	margin-top:50px;
}
.leveltest-conts-wrap .leveltest .questions strong {
	font-weight:700;
	color:var(--color-gray, #aaa);
}
.leveltest-conts-wrap .leveltest .questions span {
	font-size:22px;
}
.leveltest-conts-wrap .leveltest .img-wrap {
	line-height:0;
}
.leveltest-conts-wrap .leveltest .img-wrap img {
	width:100%;
}
.leveltest-conts-wrap .leveltest .image img {max-width:100%;}

.leveltest-conts-wrap .leveltest .questions-word {
	padding:40px 30px;
	border:1px dashed var(--color-gray, #aaa);
	font-weight:700; font-size:28px;
	color:var(--color-dark-gray, #333);
}
.leveltest-conts-wrap .leveltest .questions-word span {
	position:relative; bottom:5px;
	display:inline-block;
	width:80px;
	border-bottom:2px solid var(--color-dark-gray, #333);
	vertical-align:bottom;
}

.leveltest-conts-wrap .leveltest .select-answer {
	position:relative; left:-10px;
	margin-top:10px;
	width:calc(100% + 20px);
	font-size:0;
}
.leveltest-conts-wrap .leveltest .select-answer li {
	display:inline-block;
	margin-top:20px; padding:0 10px;
	width:50%;
}
.leveltest-conts-wrap .leveltest .select-answer li.full {width:100%;}
.leveltest-conts-wrap .leveltest .select-answer li input {
	display:none;
}
.leveltest-conts-wrap .leveltest .select-answer li label {
	position:relative;
	display:block;
	padding:14px 30px;
	width:100%;
	border:1px solid #ddd;
	font-size:22px; line-height:1.4em;
	color:var(--color-dark-gray, #333);
	cursor:pointer;
}
.leveltest-conts-wrap .leveltest .select-answer li input:checked + label {
	background:url('/html/images/sub/leveltest/icon_check.png') no-repeat 93% center;
}
.leveltest-conts-wrap .leveltest .select-answer li input:checked + label:before {
	content:'';
	position:absolute; top:-1px; left:-1px;
	width:calc(100% + 2px); height:calc(100% + 2px);
	box-sizing:border-box;
	border:2px solid var(--color-dark-gray, #333);
}
.leveltest-conts-wrap .leveltest .select-answer li input.wrong + label:before {
	content:'';
	position:absolute; top:-1px; left:-1px;
	width:calc(100% + 2px); height:calc(100% + 2px);
	box-sizing:border-box;
	border:2px solid var(--color-dark-gray, #333);
}
.leveltest-conts-wrap .leveltest .select-answer li input.correct + label {
	background:url('/html/images/sub/leveltest/icon_check_red.png') no-repeat 93% center;
	color:var(--color-red, #dc3545);
}
.leveltest-conts-wrap .leveltest .select-answer li input.correct + label:before {
	content:'';
	position:absolute; top:-1px; left:-1px;
	width:calc(100% + 2px); height:calc(100% + 2px);
	box-sizing:border-box;
	border:2px solid var(--color-red, #dc3545);
}
.leveltest-conts-wrap .leveltest .select-answer li input[type="text"] {
	display:block;
	padding:0 30px;
	width:100%; height:60px;
	border:1px solid #ddd;
	font-size:22px;
	color:var(--color-dark-gray, #333);
}
.leveltest-conts-wrap .leveltest .select-answer li input[type="text"]:placeholder {
	color:var(--color-gray, #aaa);
}
.leveltest-conts-wrap .leveltest .select-answer li textarea {
	display:block;
	padding:10px 20px;
	width:100%; min-height:100px;
	border:1px solid #ddd;
	font-size:22px;
	color:var(--color-dark-gray, #333);
    line-height:1.4em;
}
.leveltest-conts-wrap .leveltest .select-answer li textarea:placeholder {
	color:var(--color-gray, #aaa);
}
.leveltest-conts-wrap .leveltest .select-answer li .text {
	position:relative;
	display:block;
	padding:14px 30px;
	width:100%;
	border:1px solid #ddd;
	font-size:22px; line-height:1.4em;
	color:var(--color-dark-gray, #333);
}
.leveltest-conts-wrap .leveltest .select-answer li .text.correct {
	background:url('/html/images/sub/leveltest/icon_check_red.png') no-repeat 93% center;
	color:var(--color-red, #dc3545);
}
.leveltest-conts-wrap .leveltest .select-answer li .text.correct:before {
	content:'';
	position:absolute; top:-1px; left:-1px;
	width:calc(100% + 2px); height:calc(100% + 2px);
	box-sizing:border-box;
	border:2px solid var(--color-red, #dc3545);
}

.leveltest-conts-wrap .leveltest .answer-sheet {
	position:fixed; top:120px; right:60px;
	z-index:999;
	width:300px;
	background:#fff;
}
.leveltest-conts-wrap .leveltest .answer-sheet table {
	width:100%;
}
.leveltest-conts-wrap .leveltest .answer-sheet table caption {
	background:#2a2b34;
	font-weight:700; font-size:24px; line-height:60px;
	color:#fff;
}
.leveltest-conts-wrap .leveltest .answer-sheet table th,
.leveltest-conts-wrap .leveltest .answer-sheet table td {
	height:40px;
	border:1px solid var(--color-gray, #aaa);
	font-size:16px;
	color:var(--color-dark-gray, #333);
	vertical-align:middle;
	text-align:center;
}
.leveltest-conts-wrap .leveltest .answer-sheet table td:nth-of-type(2) {
	color:var(--color-red, #dc3545);
}
.leveltest-conts-wrap .leveltest .answer-sheet table th {
	font-weight:700;
}
.leveltest-conts-wrap .leveltest .answer-sheet table tbody tr {
    position:relative;
    cursor:pointer;
}
.leveltest-conts-wrap .leveltest .answer-sheet table .on:after {
	content:'';
	position:absolute; top:-1px; left:-1px;
	width:100%; height:100%;
	border:3px solid var(--color-red, #dc3545);
	box-sizing:border-box;
}

@media only screen and (max-width:1024px) {
	.leveltest-conts-wrap .leveltest .answer-sheet {
		display:none;
	}
}
@media only screen and (max-width:768px) {
	.leveltest-conts-wrap .leveltest02 .time {
		margin-bottom:20px;
	}
	.leveltest-conts-wrap .leveltest02 .time dt, 
	.leveltest-conts-wrap .leveltest02 .time dd {
		font-size:17px; line-height:45px;
	}

	.leveltest-conts-wrap .leveltest .questions {
		margin-top:40px; margin-bottom:20px;
		font-size:20px; line-height:1.3;
	}

	.leveltest-conts-wrap .leveltest .select-answer li {
		margin-top:10px;
		width:100%;
	}
	.leveltest-conts-wrap .leveltest .select-answer li label {
		padding:0 20px;
		font-size:17px; line-height:45px;
	}
	.leveltest-conts-wrap .leveltest .select-answer li input:checked + label ,
	.leveltest-conts-wrap .leveltest .select-answer li input.correct + label {
		background-position:95% center;
		background-size:auto 20px;
	}
	.leveltest-conts-wrap .leveltest .select-answer li input[type="text"] {
		padding:0 20px;
		height:45px;
		font-size:17px;
	}
	.leveltest-conts-wrap .leveltest .questions-word {
		padding:20px 15px;
		font-size:20px;
	}
	.leveltest-conts-wrap .leveltest .questions-word span {
		width:50px;
	}
	.leveltest-conts-wrap .leveltest .select-answer li textarea {
		padding:10px 15px;
		font-size:17px;
        min-height:70px;
	}
	.leveltest-conts-wrap .leveltest .select-answer li .text {
		padding:0 20px;
		font-size:17px; line-height:45px;
	}
    .leveltest-conts-wrap .leveltest .select-answer li .text.correct {
		background-position:95% center;
		background-size:auto 20px;
    }
}

.leveltest-conts-wrap .leveltest .leveltest-result-tit {	
	position:relative;
	padding-left:23px; margin-bottom:15px;
	font-weight:700; font-size:20px;
	color:var(--color-dark-gray, #333);
	word-break:keep-all;
}
.leveltest-conts-wrap .leveltest .leveltest-result-tit:before {
	content:'';
	position:absolute; top:7px; left:0;
	width:15px; height:15px;
	background:var(--color-dark-gray, #333);
}

.leveltest-conts-wrap .leveltest .leveltest-result-wrap {
	position:relative;
	padding:25px 0;
	background:#f5f5f7;	
}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap:before ,
.leveltest-conts-wrap .leveltest .leveltest-result-wrap:after {
	content:'';
	position:absolute; top:0;
	width:100%; height:100%;
	background:#f5f5f7;
}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap:before {
	left:100%;
}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap:after {
	right:100%;
}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul {
	font-size:0;
}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:first-of-type li {
	width:calc(50% - 10px);
}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li {
	display:inline-block;
	margin:5px; padding:15px 0;
	width:calc(25% - 10px); height:80px;
	border-radius:4px;
	background:#fff;
	box-shadow:0 0 10px rgba(0,0,0,.05);
	font-size:14px;
	color:var(--color-dark-gray, #333);
	text-align:center;
	vertical-align:top;
}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li strong {
	display:block;
	font-weight:700; font-size:22px;
	color:var(--color-dark-gray, #333);
}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:last-of-type li:last-child {
	padding:0;
	background:var(--color-red, #dc3545);
}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:last-of-type li.pass {
	padding:0;
	background:var(--color-primary, #0148d4);
}
.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li a {
	display:block;
	font-weight:700; font-size:18px; line-height:80px;
	color:#fff;
}

.leveltest-conts-wrap .leveltest .leveltest-result-table-wrap {
	padding-top:50px;
}
.leveltest-conts-wrap .leveltest .leveltest-result-table {
	width:100%;
}
.leveltest-conts-wrap .leveltest .leveltest-result-table .on {
	position:relative;
}
.leveltest-conts-wrap .leveltest .leveltest-result-table .on:after {
	content:'';
	position:absolute; top:-1px; left:-1px;
	width:100%; height:100%;
	border:3px solid var(--color-red, #dc3545);
	box-sizing:border-box;
}
.leveltest-conts-wrap .leveltest .leveltest-result-table th,
.leveltest-conts-wrap .leveltest .leveltest-result-table td {
	border:1px solid var(--color-gray, #aaa);
	height:40px;
	font-size:16px;
	vertical-align:middle;
	text-align:center;
}
.leveltest-conts-wrap .leveltest .leveltest-result-table th {
	font-weight:700;
	color:var(--color-dark-gray, #333);
}

.leveltest-conts-wrap .leveltest .wrong-answer-note {
	margin-top:110px;
}
.leveltest-conts-wrap .leveltest .wrong-answer-note .wrong-answer-note-tit {
	margin-bottom:-45px;
	border:1px solid var(--color-dark-gray, #333);
	font-weight:700; font-size:28px; line-height:78px;
	color:var(--color-dark-gray, #333);
	text-align:center;
}

.leveltest-conts-wrap .leveltest .explanation-table {
	margin-top:22px;
	width:100%;
}
.leveltest-conts-wrap .leveltest .explanation-table:last-child {
	margin-bottom:0;
}
.leveltest-conts-wrap .leveltest .explanation-table th ,
.leveltest-conts-wrap .leveltest .explanation-table td {
	border:1px solid var(--color-light-gray, #ccc);
	text-align:left;
}
.leveltest-conts-wrap .leveltest .explanation-table th {
	padding:19px 30px;
	background:#f5f5f7;
	font-weight:700; font-size:18px;
	color:var(--color-dark-gray, #333);
}
.leveltest-conts-wrap .leveltest .explanation-table td {
	padding:15px 30px;
	font-size:16px;
	color:var(--color-dark-gray, #333);
}
.leveltest-conts-wrap .leveltest .explanation-form th {
	font-size:0;
}
.leveltest-conts-wrap .leveltest .explanation-table th ul {
	display:inline-block;
	width:calc(100% - 120px);
	vertical-align:middle;
}
.leveltest-conts-wrap .leveltest .explanation-table th ul li {
	display:inline-block;
	margin-right:10px;
	font-weight:700; font-size:18px; line-height:40px;
	color:var(--color-dark-gray, #333);
	vertical-align:middle;
}
.leveltest-conts-wrap .leveltest .explanation-table th ul li:last-child {
	margin-right:0;
}
.leveltest-conts-wrap .leveltest .explanation-table th ul li span {
	display:inline-block;
	margin:5px 0;
	width:80px; height:30px;
	border-radius:15px;
	font-weight:700; font-size:16px;  line-height:30px;
	color:#fff;
	text-align:center;
	vertical-align:top;
}
.leveltest-conts-wrap .leveltest .explanation-table th ul li span img {
	position:relative; top:-2px;
	display:inline-block;
	vertical-align:middle;
}
.leveltest-conts-wrap .leveltest .explanation-table th ul li .wrong {
	background:var(--color-gray, #aaa);
}
.leveltest-conts-wrap .leveltest .explanation-table th ul li .wrong img {
	margin-right:10px;
}
.leveltest-conts-wrap .leveltest .explanation-table th ul li .correct {
	background:var(--color-red, #dc3545);
}
.leveltest-conts-wrap .leveltest .explanation-table th ul li .correct img {
	margin-left:10px;
}
.leveltest-conts-wrap .leveltest .explanation-table th ul li input {
	display:inline-block;
	margin:0 5px;
	width:40px; height:30px;
	border:1px solid var(--color-light-gray, #ccc);
	vertical-align:middle;
}
.leveltest-conts-wrap .leveltest .explanation-table .btn-change {
	display:inline-block;
	width:120px; height:40px;
	border-radius:4px;
	background:var(--color-dark-gray, #333);
	font-weight:500; font-size:16px;
	color:#fff;
	text-align:center;
	vertical-align:middle;
}
.leveltest-conts-wrap .leveltest .explanation-form td {
	height:150px;
	padding:0;
}
.leveltest-conts-wrap .leveltest .explanation-form td textarea {
	width:100%;
    padding:10px 20px;
    height:100%;
    border:1px solid #ddd;
    font-size:18px;
    color:var(--color-dark-gray, #333);
    line-height:1.4em;
    resize:none;
}
.leveltest-conts-wrap .leveltest .explanation-form td textarea::placeholder {
	color:var(--color-light-gray, #ccc);
}
.leveltest-conts-wrap .leveltest .wrong-answer-note .questions:before {
    content:'';
    background:url('/html/images/sub/leveltest/icon_test_incorrect.png') no-repeat center;
    position:absolute;
    top:-16px;
    left:-27px;
}
.leveltest-conts-wrap .leveltest .wrong-answer-note .questions.correct:before {
    background-image:url('/html/images/sub/leveltest/icon_test_correct.png');
    width:66px;
    height:68px;
}
.leveltest-conts-wrap .leveltest .wrong-answer-note .questions.incorrect:before {
    width:57px;
    height:70px;
}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle {
    display:inline-block;
    width:70px;
    height:30px;
    vertical-align:middle;
}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle input {display:none;}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle-slider {
    width:100%;
    margin:0;
}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle-slider:before {
    width:24px;
    height:24px;
}
.leveltest-conts-wrap .leveltest .explanation-form input:checked+.custom-toggle-slider:before {
    left:14px;
}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle-slider::after {
    font-size:16px;
    line-height:30px;
    right:4px;
}
.leveltest-conts-wrap .leveltest .explanation-form .custom-toggle input:checked+.custom-toggle-slider:after {
    left:4px;
    right:auto;
}
@media only screen and (max-width:768px) {
	.leveltest-conts-wrap .leveltest-result {
		margin-bottom:-60px;
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul {
		position:relative; left:-10px;
		width:calc(100% + 20px);
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li {
		margin:3px; padding:12px 0;
		width:calc(25% - 6px); height:63px;
		font-size:11px;
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li strong {
		font-size:13px;
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul li a {
		font-size:11px; line-height:63px;
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:first-of-type {
		margin-bottom:3px;
		width:calc(100% + 17px);
		padding:10px 0;;
		border-radius:4px;
		background:#fff;
		box-shadow:0 0 10px rgba(0,0,0,.05);
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:first-of-type li {
		padding:0;
		width:100%; height:auto;
		background:none;
		box-shadow:none;
		font-size:0;
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-wrap ul:first-of-type li:first-child strong {
		font-weight:400; font-size:11px;
	}

	.leveltest-conts-wrap .leveltest .leveltest-result-table-wrap {
		padding-top:30px;
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-tit {
		padding-left:15px;
		font-size:15px;
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-tit:before {
		top:5px;
		width:10px; height:10px;
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-table th, 
	.leveltest-conts-wrap .leveltest .leveltest-result-table td {
		height:26px;
		font-size:12px;
	}
	.leveltest-conts-wrap .leveltest .leveltest-result-table td img {
		height:10px;
	}
	
	.leveltest-conts-wrap .leveltest .wrong-answer-note {
		margin-top:40px;
	}
	.leveltest-conts-wrap .leveltest .wrong-answer-note .wrong-answer-note-tit {
		margin-bottom:-10px;
		font-size:18px; line-height:45px;
	}

	.leveltest-conts-wrap .leveltest .explanation-table {
		margin-top:15px;
	}
	.leveltest-conts-wrap .leveltest .explanation-table th {
		padding:10px 12px;
		font-size:15px;
	}
	.leveltest-conts-wrap .leveltest .explanation-table td {
		padding:12px 15px;
		font-size:14px;
	}
	.leveltest-conts-wrap .leveltest .explanation-table th ul {
		width:calc(100% - 70px);
	}
	.leveltest-conts-wrap .leveltest .explanation-table th ul li {
		margin-right:5px;
		font-size:14px; line-height:30px;
	}
	.leveltest-conts-wrap .leveltest .explanation-table th ul li span {
		width:50px; height:25px;
		font-size:11px; line-height:25px;
	}
	.leveltest-conts-wrap .leveltest .explanation-table th ul li span img {
		height:10px;
	}
	.leveltest-conts-wrap .leveltest .explanation-table th ul li .wrong img {
		margin-right:4px;
	}
	.leveltest-conts-wrap .leveltest .explanation-table th ul li .correct img {
		margin-left:4px;
	}
	.leveltest-conts-wrap .leveltest .explanation-table th ul li input {
		width:30px; height:25px;
	}
	.leveltest-conts-wrap .leveltest .explanation-table .btn-change {
		width:70px; height:35px;
		font-size:13px;
	}
	.leveltest-conts-wrap .leveltest .explanation-form th {
		font-size:0;
	}
    .leveltest-conts-wrap .leveltest .wrong-answer-note .questions:before {
        background-size:82%;
        top:-25px;
        left:-25px;
    }
}

#leveltestWrap #footer .btn-top {
	right:auto; left:50%;
	margin-left:330px;
	border:1px solid #ddd;
	box-shadow:none;
}

@media only screen and (max-width:880px) {
	#leveltestWrap #footer .btn-top {
		left:auto; right:20px; bottom:0;
		margin-left:0;
	}
}

/* 평점 */
.radio_star {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.radio_star input[type="radio"] + label {
  display: block;
  padding-left: 0;
  width: 2.375rem;
  height: 2.375rem;
  margin-right: 0 !important;
  margin-left: 1.25rem;
}

.radio_star input[type="radio"] + label:before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/html/images/sub/mypage/img_star_blank.png") no-repeat center/100%;
  border: 0;
  border-radius: 0;
}

.radio_star input[type="radio"] + label:last-child {
  margin-left: 0;
}

.radio_star input[type="radio"]:checked + label:before {
  background: url("/html/images/sub/mypage/img_star.png") no-repeat center/100%;
}

.radio_star input[type="radio"]:checked + label ~ label:before {
  background: url("/html/images/sub/mypage/img_star.png") no-repeat center/100%;
}


/* 별점 선택 */
.star-rate-select {
	display: inline-block;
	width: 19px;
	height: 19px;
    padding:0;
	background: url(../images/sub/mypage/img_star_blank.png) no-repeat;
	background-size: 100%;
	font-size: 19px;
	vertical-align: top;
	text-indent:-9999em;
}
.star-rate-select.checked {
	background-image: url(../images/sub/mypage/img_star.png);
}

/*수량 선택*/
.quantity-wrap { 
	width:100px;
	border-radius:4px;
	border:1px solid #ddd;
	background:#fff;
    overflow:hidden;
}
.quantity-wrap > * { 
	display:inline-block;
	vertical-align:top;
}
.quantity-wrap button { 
	position:relative;
	width:30px; height:38px;
	background:#fff;
    font-size:0;
    text-indent:-9999em;
}
.quantity-wrap button:before { 
	content:'';
	position:absolute; top:50%; left:50%;
	margin-top:-1px; margin-left:-5px;
	width:10px; height:2px;
	background:#000;
}
.quantity-wrap .add:after { 
	content:'';
	position:absolute; top:50%; left:50%;
	margin-top:-5px; margin-left:-1px;
	width:2px; height:10px;
	background:#000;
}
.quantity-wrap input { 
	width:38px; height:38px;
	border:none;
	font-size:18px;
	color:var(--color-dark-gray, #333);
	text-align:center;
}

/* 버튼 */
.btn-area {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.btn-area .right-box {margin-left:auto}
.btn-area.full li,
.btn-area li.full, [class^="btn"].full {width:100%}
.btn-area.half li {width:calc(50% - 5px);}
:is(.btn-xl, .btn-lg, .btn-ml, .btn-md, .btn-sm, .btn-xs) {display:inline-block; font-weight:500; line-height:1.5em !important; letter-spacing:-.025em; text-align:center; border-radius:4px; box-sizing:border-box; background:transparent;}
.btn-xl {min-width:120px; padding:14px; font-size:20px;}
.btn-lg {min-width:90px; padding:10px 10px 11px; font-size:18px;}
.btn-ml {min-width:70px; padding:12px 10px 12px; font-size:16px;}
.btn-md {min-width:60px; padding:7px 10px 7px; font-size:16px;}
.btn-sm {min-width:60px; padding:8px 10px 9px; font-size:14px;}
.btn-xs {min-width:60px; padding:3px 5px 4px; font-size:14px;}
[class^="btn"].icon {font-size:0;min-width:auto;}
[class^="btn"].bg-primary {color:#fff; background-color:var(--color-primary, #0148d4); border:1px solid var(--color-primary, #0148d4);}
[class^="btn"].bg-red {color:#fff; background-color:var(--color-red, #dc3545); border:1px solid var(--color-red, #dc3545);}
[class^="btn"].bg-skyblue {color:#fff; background-color:#0098e0; border:1px solid #0098e0;}
[class^="btn"].bg-gray {color:#fff; background-color:var(--color-light-gray, #ccc); border:1px solid var(--color-light-gray, #ccc);}
[class^="btn"].bg-darkgray {color:#fff; background-color:var(--color-dark-gray, #333); border:1px solid var(--color-dark-gray, #333);}
[class^="btn"].bd-primary {color:var(--color-primary, #0148d4); border:1px solid var(--color-primary, #0148d4);}
[class^="btn"].bd-gray {color:var(--color-gray, #aaa); border:1px solid var(--color-gray, #aaa);}
[class^="btn"].bd-darkgray {color:var(--color-dark-gray, #333); border:1px solid var(--color-dark-gray, #333);}
[class^="btn"].bd-red {color:var(--color-red, #dc3545); border:1px solid var(--color-red, #dc3545);}
[class^="btn"].bd-primary {color:var(--color-primary, #0148d4); border:1px solid var(--color-primary, #0148d4);}
[class^="btn"].bg-bd-gray {color:var(--color-gray, #aaa); background-color:#f5f5f7; border:1px solid #ddd;}
[class^="btn"]:disabled {background:var(--color-light-gray, #ccc) !important; border-color:var(--color-light-gray, #ccc);}
[class^="btn"].link {padding:0;}

@media only screen and (max-width: 767px) {
	.btn-xl {
		padding:12px;
		font-size:16px;
	}
	.btn-lg {
        padding:8px 5px 8px;
        font-size:15px;
    }
	.btn-ml {
        padding:8px 5px 8px;
        font-size:14px;
    }
	.btn-md {
        padding:7px 5px 7px;
        font-size:13px;
    }
	.btn-sm {
        padding:5px;
        font-size:12px;
    }
	.btn-xs {
        padding-bottom:3px;
        font-size:12px;
    }
}

/*대시보드*/
.dashboard {font-size:16px; letter-spacing:-.025em; color:var(--color-dark-gray, #333);}
.dashboard .dashboard-wrap {display:flex; flex-wrap:wrap; column-gap:20px;}
.dashboard .dashboard-wrap:last-child {align-items:flex-start;}
.dashboard .dashboard-area {display:flex; flex-wrap:wrap; gap:20px; width:calc(50% - 10px); container-type:inline-size;	container-name:dashboard-area;}
.dashboard .box {width:100%; padding:26px 30px; border:1px solid #eee; border-radius:8px;}
.dashboard .box.half {width:calc(50% - 10px);}
.dashboard .title {position:relative; font-weight:bold;}
.dashboard .title .arrow {position:absolute; top:50%; right:-10px; margin-top:-3px; width:6px; height:6px; border:2px solid var(--color-dark-gray, #333); border-left:none; border-bottom:none; text-indent:-9999em; transform:rotate(48deg);}
.dashboard .dashboard-head {display:flex; justify-content:space-between; align-items:center;}
.dashboard .dashboard-head .sub-text {font-weight:bold; color:var(--color-gray, #aaa);}
.dashboard .intro-box {background:linear-gradient(120deg, rgba(16,91,191,1) 0%, rgba(0,46,162,1) 100%);}
.dashboard .intro-box .title {font-size:24px; color:#fff;}
.dashboard .intro-box .title .user-id {text-decoration:underline;}
.dashboard .intro-box .text {margin-top:17px; color:#fff;}
.dashboard .week-box {position:relative; left:-10px; width:calc(100% + 20px); display:flex; column-gap:4px; margin-top:17px;}
.dashboard .week-box .day-box {display:flex; flex-direction:column; align-items:center; width:calc(100% / 7); height:110px; padding:16px 3px 9px; text-align:center; border:1px solid #eee; border-radius:8px;}
.dashboard .week-box .day-box.day-off {color:var(--color-red, #dc3545);}
.dashboard .week-box .day-box.today {color:var(--color-primary, #0148d4); font-weight:bold; background:#e3edf9;}
.dashboard .week-box .day {margin-top:5px;}
.dashboard .week-box .icon-check {display:inline-block; width:24px; height:24px; margin-top:auto; border-radius:12px; font-size:0; text-indent:-9999em; vertical-align:top; background:var(--color-primary) url('/html/images/common/checkmark.png') no-repeat center center;}
.dashboard .recent-lecture {border:5px solid #e3edf9; padding-top:15px;}
.dashboard .recent-lecture .dashboard-head {padding-bottom:15px; border-bottom:1px solid #333}
.dashboard .recent-lecture .recent-lecture-box {margin-top:16px; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;}
.dashboard .recent-lecture .lecture-name {flex-grow:1; font-weight:bold; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; font-size:16px;}
.dashboard .recent-lecture .expire-date {flex-shrink:0; font-size:14px; color:var(--color-gray, #aaa);}
.dashboard .recent-lecture .progress-bar {margin-top:13px; position:relative; display:block; width:100%; height:14px; background:#e3edf9; border-radius:3px;}
.dashboard .recent-lecture .progress-bar .bar {position:absolute; top:0; left:0; height:14px; background:#0056c1; border-radius:3px;}
.dashboard .recent-lecture a[class^="btn"] {width:100%; margin-top:20px;}
.dashboard .progress-rate {padding:5px 13px; font-size:14px; color:var(--color-primary, #0148d4); border:2px solid #eee; border-radius:15px;}
.dashboard .sub-title {margin-top:0; font-size:14px; font-weight:bold; color:var(--color-gray, #aaa);}
.dashboard .count {margin-top:12px; font-weight:bold; font-size:16px;}
.dashboard .count strong {font-size:22px;}
.dashboard .rate-box {display:flex; align-items:center; justify-content:space-between; margin-top:12px;}
.dashboard .rate-box .graph {width:70px; height:70px;}
.dashboard .tooltip {display:inline-block;}
.dashboard .tooltip::before {content:''; display:inline-block; width:21px; height:21px; margin-left:4px; background:url(/html/images/common/icon_tooltip.webp) center no-repeat; vertical-align:top; cursor:pointer;}
.dashboard .tooltip .tooltip-box {position:absolute; top:100%; left:-7px; padding-top:10px; z-index:1; display:none;}
.dashboard .tooltip .tooltip-box .tooltip-inner {position:relative; padding:20px 20px; width:180px; line-height:18px; font-size:12px; color:var(--color-gray, #aaa); background:#fff; border:1px solid var(--color-gray, #aaa);}
.dashboard .tooltip .tooltip-box .tooltip-inner::before {content:''; position:absolute; top:-10px; left:20px; width:12px; height:10px; background:url(/html/images/common/tooltip_arrow.webp) no-repeat;}
.dashboard .tooltip:hover .tooltip-box {display:block;}
.dashboard .summary-info {display:flex; flex-direction:column; align-items:flex-start;}
.dashboard .summary-info .count {margin-top:25px; margin-left:auto;}
.dashboard .week-lecture .graph {margin-top:17px; height:390px;}
.dashboard .dashboard-banner {margin-top:20px;}
.dashboard .dashboard-banner a {display:block; border-radius:8px; background-position:center; background-repeat:no-repeat; padding-top:100px; background-size:cover;}
.dashboard .dashboard-banner + .dashboard-wrap {margin-top:20px;}
.dashboard .board {margin-top:20px; border-top:1px solid var(--color-dark-gray, #333);}
.dashboard .board .post {padding:18px 11px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eee;}
.dashboard .board .post .subject {display:block; width:calc(100% - 150px); font-weight:500; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; font-size:16px;}
.dashboard .board .post .content {width:calc(100% - 140px); margin-left:25px;}
.dashboard .board .post .content .subject {width:100%;}
.dashboard .board .post .content .dot {margin-top:8px; font-size:14px;}
.dashboard .board .post .date {font-size:14px; font-weight:300; color:var(--color-gray, #aaa);}
.dashboard .board .post .state {font-size:14px; font-weight:500;}
.dashboard .board .post .time {font-size:14px; font-weight:300; color:var(--color-gray, #aaa);}
.dashboard .board.course-status .post {align-items:flex-start; justify-content:flex-start;}
.dashboard .board.course-status .post .time {margin-left:auto;}
.dashboard .board.course-status .post .date {color:var(--color-dark-gray, #333);}
.dashboard .order-box {margin-top:20px; border:1px solid #eee;}
.dashboard .order-box .order-head {display:flex; align-items:center; justify-content:space-between; padding:18px 19px 16px; background:var(--color-primary, #0148d4); border-radius:3px;}
.dashboard .order-box .order-head .subject {font-weight:bold; color:#fff; font-size:16px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.dashboard .order-box .order-head .date {margin-left:5px; font-weight:300; font-size:14px; color:#fff;}
.dashboard .order-list {padding:10px 18px;}
.dashboard .order-list li {padding:13px 0 12px; display:flex; align-items:center; justify-content:space-between;}
.dashboard .order-list li + li {border-top:1px solid #eee;}
.dashboard .order-list .subject {font-size:14px; color:var(--color-dark-gray, #333); text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.dashboard .order-list .state {flex-shrink:0; font-size:14px; font-weight:500;}
.dashboard .dot {position:relative; padding-left:12px;}
.dashboard .dot::before {content:''; position:absolute; top:6px; left:0; width:5px; height:5px; background:var(--color-dark-gray, #333); border-radius:1px;}
.dashboard .blue {color:var(--color-primary, #0148d4);}
.dashboard .red {color:var(--color-red, #dc3545);}

@media only screen and (max-width: 1024px) { 
	.dashboard .dashboard-wrap {margin-top:20px;}
}

@container dashboard-area (max-width: 425px) {
	.dashboard {font-size:15px;}
	.dashboard .box {padding:20px 22px;}
	.dashboard .intro-box .title {font-size:23px;}
	.dashboard .intro-box .text {font-size:16px; margin-top:15px;}
	.dashboard .title {font-size:15px;}
	.dashboard .tooltip::before {width:18px; height:19px;}
	.dashboard .dashboard-head .sub-text {font-size:15px;}
	.dashboard .week-box {margin-top:15px;}
	.dashboard .week-box .day-box {height:100px; padding:12px 2px 9px; font-size:15px;}
	.dashboard .week-box .icon-check {width:20px; height:20px; background-size:10px;}
	.dashboard .recent-lecture .dashboard-head {padding-bottom:12px;}
	.dashboard .recent-lecture .recent-lecture-box {margin-top:13px;}
	.dashboard .recent-lecture .lecture-name {font-size:15px;}
	.dashboard .recent-lecture a[class^="btn"] {margin-top:17px;}
	.dashboard .rate-box .graph {/*width:60px;height:70px;*/  flex-grow:1;}
	.dashboard .progress-rate {font-size:14px;}
	.dashboard .sub-title {font-size:14px;}
	.dashboard .count {margin-top:10px; font-size:15px;}
	.dashboard .count strong {font-size:19px;}
	.dashboard .summary-info .count {margin-top:22px;}
	.dashboard .week-lecture .graph {height:355px;}
	.dashboard .dot {padding-left:11px;}
	.dashboard .dot::before {width:4px; height:4px;}
	.dashboard .board {margin-top:17px;}
	.dashboard .board .post {padding:15px 9px;}
	.dashboard .board .post .subject {width:calc(100% - 130px); font-size:15px;}
	.dashboard .board .post .content {width:calc(100% - 100px); margin-left:20px;}
	.dashboard .board .post .content .dot {margin-top:6px; font-size:14px;}
	.dashboard .order-box .order-head {padding:14px 15px 13px;}
	.dashboard .order-box .order-head .subject {font-size:14px;}
	.dashboard .order-list {padding:8px 16px;}
	.dashboard .order-list li {padding:11px 0 10px;}
	.dashboard .order-list .subject {font-size:14px;}
	.dashboard .order-list .state {font-size:14px;}
}

@container dashboard-area (max-width: 360px) {
	.dashboard {font-size:14px;}
	.dashboard .intro-box .title {font-size:22px;}
	.dashboard .intro-box .text {font-size:15px; margin-top:15px;}
	.dashboard .title {font-size:14px;}
	.dashboard .tooltip::before {width:18px; height:19px;}
	.dashboard .dashboard-head .sub-text {font-size:14px;}
	.dashboard .week-box .day-box {font-size:14px;}
	.dashboard .recent-lecture .recent-lecture-box {margin-top:13px;}
	.dashboard .recent-lecture .lecture-name {font-size:14px;}
	.dashboard .recent-lecture .expire-date {font-size:13px;}
	.dashboard .progress-rate {font-size:13px;}
	.dashboard .sub-title {font-size:13px;}
	.dashboard .count {font-size:14px;}
	.dashboard .count strong {font-size:18px;}
	.dashboard .rate-box {flex-direction:column; align-items:flex-start;}
	.dashboard .rate-box .graph {margin-top:17px; width:100%;}
	.dashboard .summary-info .count {margin-top:22px;}
	.dashboard .board .post .subject {font-size:14px;}
	.dashboard .board .post .date {font-size:13px;}
	.dashboard .board .post .state {font-size:13px;}
	.dashboard .board .post .time {font-size:13px;}
	.dashboard .board .post .content .dot {font-size:13px;}
	.dashboard .order-box .order-head .subject {font-size:14px;}
	.dashboard .order-box .order-head .date {font-size:13px;}
	.dashboard .order-list .subject {font-size:13px;}
	.dashboard .order-list .state {font-size:13px;}
}

@media only screen and (max-width: 768px) { 
	.dashboard .dashboard-wrap {flex-direction:column; row-gap:20px;}
	.dashboard .dashboard-area {width:100%; gap:18px;}
	.dashboard .tooltip::before {margin-left:0;}
	.dashboard .sub-title {margin-top:0;}
	.dashboard .dashboard-banner a {padding-top:14vw;}
	.dashboard .board .post {align-items:flex-start; justify-content:flex-start; flex-wrap:wrap; gap:12px;}
	.dashboard .board .post .subject {width:100%;}
	.dashboard .board .post .content {width:100%; margin-left:0; order:1;}
}

.sample-lecture .popup-inner {max-width:700px; max-height:500px;}
.sample-player {position:relative; padding-top:56.3%;}
.sample-player iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.sample-lecture .popup-contents-wrap {height:auto;}
@media only screen and (max-width: 768px) { 
    .sample-lecture .popup-contents-wrap {height:auto;}
}