/* ---section1 (detail_header)--------- */
body:has(.main_course_free) .headerGroup{margin-bottom: 0px;}
.headerSection_ItCour .plogo img{
  filter: brightness(0) saturate(100%) invert(99%) sepia(3%) saturate(887%) hue-rotate(194deg) brightness(120%) contrast(100%);
}
.detail_header {
	width: 100%; height: auto; padding: 50px 0; 
	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("/assets/img/banner/recomendlist_banner.png"); 
	background-size: cover; background-position: center; background-repeat: no-repeat; 
}

.design_bg {background-image: linear-gradient(rgba(60,16,83,0.5),rgba(60,16,83,0.5));}
.video_bg {background-image: linear-gradient(rgba(164,25,61,0.5),rgba(164,25,61,0.5));}
.interior_bg {background-image: linear-gradient(rgba(80,88,108,0.5),rgba(80,88,108,0.5));}
.cad_bg {background-image: linear-gradient(rgba(0,32,63,0.5),rgba(0,32,63,0.5));}
.maya_bg {background-image: linear-gradient(rgba(52,133,151,0.5),rgba(52,133,151,0.5));}
.certificate_bg {background-image: linear-gradient(rgba(72,49,212,0.5),rgba(72,49,212,0.5));}
.bussiness_bg {background-image: linear-gradient(rgba(44,95,45,0.5),rgba(44,95,45,0.5));}
.sideline_bg {background-image: linear-gradient(rgba(106,123,162,0.5),rgba(106,123,162,0.5));}

.detail_header .content {
	width: 100%; 
	display: flex; justify-content: center; align-items: center; 
	flex-direction: column-reverse; row-gap: 30px; column-gap: 40px;
}
.detail_header .contLeft{
	width:100%; max-width: 480px; height: auto; 
	padding: 20px; padding-bottom: 10px; 
	box-sizing: border-box; border-radius: 15px; background-color: #fff;
}

/* contLeft inbox-h */
.inbox-h {position: relative; background-color: #FAEBEF; border-radius: 10px; padding: 20px; box-sizing: border-box;}
.inbox-h .categorybox {position: absolute; top: -10px; left: 8%; width: 85%; height: 33px; border-radius: 100px; background-color: #fff; display: flex; align-items: center;}
.inbox-h .categorybox_img {background-color: #FAEBEF; padding: 5px 18px; border-radius: 20px; margin-left: 4px; margin-bottom: 2px; }
.inbox-h .categorybox_tit {margin-left: 8px; color: #736F79; font-size: 14px; font-weight: 500;}

.inbox-h .titleH3 {
	color: #333D79; font-weight: 500; font-size: 16px; 
	padding-left: 15px;	margin-top: 30px;
	position: relative;
}
.inbox-h .titleH3:before{
	content:''; width: 8px; height: 8px;
	position: absolute; left: 0; top: 9.5px; transform: translateY(-50%);
	background-color: #333D79;
	border-radius: 50%;
}
.inbox-h .detailTxt {
	font-size: 14px; font-weight: 400; line-height: 1.55;
	margin-top: 15px; margin-bottom:50px;
}
.inbox-h .subbtn{display: flex;flex-direction: column;align-items: center;	gap: 10px;}
.inbox-h .subbtn .previewBtn,
.inbox-h .subbtn .submit_a {
	width: 100%; max-width: 270px;
	border-radius: 5px; color: white;
	font-size: 16px; font-weight: 700; text-align: center;
	padding: 10px 20px; cursor: pointer;
}
.inbox-h .subbtn .previewBtn{background-image: linear-gradient(to right, #16B9FE, #04C559);}
.inbox-h .subbtn .submit_a {box-shadow: 1px 1px 10px 1px lightgray; background-color:#0080ff;}
.inbox-h .subbtn .submit_a:hover {background-color:#0080ff; color: #fff;}

.bottbox-h {width: 100%; display: flex; justify-content: space-between; padding-top: 10px;}
.bottbox-h div {display: flex; align-items: center; gap: 6px;}
.bottbox-h img{width: 25px;}
.bottbox-h_p{font-size: 13px; font-weight: 500; color: #363636;}

.contRight {width: 100%; max-width: 480px;}
.contRight .contRight_categ {color: #fff; font-size: 14px; font-weight: 500; margin-bottom: 5px;}
.contRight .contRight_tit {color: #fff; font-size: 20px; font-weight: 500; line-height: 24px; margin-bottom: 25px;}
.contRight .contRight_per {color: #FFE413; font-size: 18px; font-weight: bold; margin-right: 20px;}
.contRight .contRight_diCost {color: #fff; font-size: 18px; font-weight: bold; margin-right: 20px;}
.contRight .contRight_diCost > span {font-size: 18px; font-weight: 400;}
.contRight .contRight_acCost {color: #fff; font-size: 16px; text-decoration: line-through; margin-bottom: 10px;}
/* ------------------------------------------------------------- */

/* ---section2 (detail_main)--------- */
.detail_main {width: 100%; padding: 120px 0; background-color: #F6F6F6; position: relative;}
.inbox-m{
	padding: 10px ; border-radius: 15px; background-color: #fff;
	margin-bottom: 50px;
}
.inbox-m:last-child{margin-bottom: unset;}
.detail_main .contBox {
	position: relative; width: 100%; height: auto; 
	box-sizing: border-box; background-color: #fff; border-radius: 8px;
	padding: 20px 20px 50px 20px; 
}
.detail_main .contBox1 {background-color: #A8B69D; }
.detail_main .contBox2 {background-color: #E6D197;}
.detail_main .contBox3 {background-color: #ACD3DD;}
.detail_main .contBox4 {background-color: #E4E2DF;}
.detail_main .contBox_tit {font-size: 20px; font-weight: 500; color: #fff; text-align: center; margin-top: 25px; margin-bottom: 25px;}
.detail_main .contBox_tit--courselist {color: #050505;}
.detail_main .contBox_txtBox {width: 90%;	margin: 0 auto; display: flex; flex-direction: column; row-gap: 5px;}
.detail_main .contBox_txtBox p{padding-left: 20px; position: relative; font-size: 14px; line-height: 18px;}
.detail_main .contBox_txtBox p::before{
	content: ''; width: 6px; height: 6px;
	border-radius: 50px; background-color: #fff;
	position: absolute; left: 0; top: 9.5px; transform: translateY(-50%);
}
.freeCour_li{
	display: flex; justify-content: space-between; align-items: center;
	position: relative;
	padding: 17px 0; font-size: 14px; font-weight: 500;
	color: #686868; border-bottom: 1px solid #ccc;
	}
.freeCour_li:first-child{border-top: 1px solid black;}
.freeCour_li .number {width: 5%; text-align: center; color: #fff; font-size: 17px; font-weight: 500; margin-right: 5px;}
.freeCour_li .liTxt {width: 80%; text-align: left; padding: 0 15px; display: block; box-sizing: border-box;}
.freeCour_li > .time {text-align: center;}


/* ------지금 바로 신청하기 버튼------- */
/* 더 수정할 예정 */
.detail_main .joinBtn {
	border: none; width: 110px; height: 45px; border-radius: 50px; cursor: pointer; background-color: #333D79; color: #fff; font-weight: bold; font-size: 14px;
	position: fixed; top: 84.5%; right: 1.2%; z-index: 10000;
	box-shadow: 0px 3px 2px 0px rgb(0 0 0 / 28%);
}
.detail_main .joinBtn:hover {background-color: tomato;}
/* ---------------------------------------- */

/* -------------미리보기 ------------- */
.blocker{z-index: 30000 !important;background-color: rgb(0 0 0 / 50%) !important;}

/* ---미리보기 팝업창--- */
.modalChange{
	max-width: 800px !important; width: 100% !important; height: auto !important;
	z-index: 31000 !important;  overflow: unset !important;
	background-color: #212529 !important; color: white;
	padding: 15px 15px 30px 15px !important;
}
.modalTopFlex{display: flex;justify-content: space-between;}
.modalTopFlexClose{background-image: unset !important;}
.modalTopFlexClose_img{position: absolute !important;	top: 25px; right: 30px;}
.modalPreVideo{
	width: 100%; max-width: 800px; height: auto; min-height: 27vh;
	margin: 0 auto; margin-bottom: 35px; margin-top: 20px;
	background-color: black;
	display: flex;
}
.modalBottomFlex{	display: flex;flex-direction: column;align-items: center;	gap: 30px;}
.modalBottomFlex_className{font-size: 14px;}
.modalBottomFlex_directBtn{color: white; margin: 0 auto;}
/* ------------------------------------------------------------- */

@media all and (min-width:420px) {.detail_main .joinBtn {top: 83.5%;}}

@media all and (min-width:550px) {
	/* 미리보기 팝업창 */
	.modalBottomFlex {flex-direction: row; justify-content: space-between;}
	.modalBottomFlex_directBtn{margin: unset;}
}

@media all and (min-width:768px) {
	.inbox-m{padding: 15px;}
	/* ---section1 (detail_header)--------- */
	.contRight .contRight_tit{font-size: 24px; line-height: 28px;}
	.inbox-h .subbtn .previewBtn,
	.inbox-h .subbtn .submit_a {font-size: 18px; font-weight: bold;}

	.detail_main .joinBtn{top: 85%;}
}

@media all and (min-width:1080px) {
	/* ---section1 (detail_header)--------- */
	body:has(.main_course_free) .headerGroup{margin-bottom: -105px;}
	body:has(.main_course_free) .header_login a{color:#fff !important;}
	body:has(.main_course_free) .header_login p{color:#fff !important;}
	body:has(.main_course_free) .dropdown-content a {color:#000 !important;}
	body:has(.main_course_free) .menuLi_pc > a,
	body:has(.main_course_free) .menuLi_pc > button {color:#fff !important;}
	body:has(.main_course_free) .menuLi_pc .dropbtn {color:#fff !important;}
	body:has(.main_course_free) .dropbtn {color:#fff !important;}
	.detail_header {padding-top: 200px; padding-bottom: 150px;}
	.detail_header .content {flex-direction: row; }
	.contleft {width: 50%; max-width: 428px;}
	.bottbox-h img{width: 28px;}
	.bottbox-h_p{font-size: 14px;}

	.contRight {width: 50%; max-width: 428px;}
	.contRight .contRight_tit {font-size: 30px; line-height: 36px; margin-bottom: 50px;}
	.contRight .contRight_categ {font-size: 17px; margin-bottom: 10px;}

	.detail_main .contBox_tit{font-size: 24px;}
	.detail_main .contBox_txtBox p{font-size: 16px; line-height: 22px;}

	/*---------미리보기 팝업창------------ */
	.modalChange{padding: 15px 30px 30px 15px !important;}
	.modalBottomFlex_className{font-size: 16px;}

	/*---------신규레이어 적용 안 하는 일반과정에 적용------------ */
	body:has(.main_course_free) .headerSection_ItCour{margin-bottom: -135px;}

	/* 카카오톡 */
	.detail_main .joinBtn {font-size: 16px; width: 128px; height: 54px; top: 83.5%;}
}