/**************************************************************************************************
										common
***************************************************************************************************/
main { min-height: calc(100vh - 14.07rem);}
main > h2,
main > section {max-width: 1440px; width: 100%; margin: 0 auto;}
main > h2 {padding-top: 2rem; padding-bottom:  2rem; font-size:2.37rem; font-weight: 700; letter-spacing: -0.5px;}
main > section {padding-bottom: 5rem; }
@media (min-width:991px){	
    .wrap { padding-top: 8.5rem;}
}
@media (max-width:990px) { 
	.wrap { padding-top: 4.5rem; overflow-x: hidden;}
	main > h2 {padding-top:0; padding-bottom: 1.25rem;}
}
@media (max-width:660px) { 
	.wrap { padding-top: 3.5rem;}
	main > h2 {padding-top:0; padding-bottom: 1.25rem; font-size: 1.85rem;}
}

.contents_top {display: flex; width: 100%; justify-content: space-between; align-items: flex-end; margin-bottom: 0.625rem; position: relative;}
.contents_body {display: flex; flex-direction: column;}
section h3 { font-size: 1.75rem; font-weight: 700; background-position: 100% 100%, 0 104%; background-repeat: no-repeat;   background-image: linear-gradient(transparent, transparent),linear-gradient(#B5AEDA, #B5AEDA);  background-size: 0 0.5rem, 100% 0.5rem; padding-bottom: 0.25rem;} 

.contents_info {display: flex; align-items: flex-end; gap : 0.625rem; padding-top: 6.5rem; padding-bottom: 1rem;}
.Product .contents_info {padding-top: 2rem;} 
.contents_info > p {font-size: 1rem; font-weight: 400; color: #5C5B5F; letter-spacing: -0.5px;}
.contents_info > p > strong {color:#ff6600; font-weight: 500;}

/**************************************************************************************************
										Member
***************************************************************************************************/
/**** login-(s) ****/

.login_wrap h2 {font-size: 2.12rem; font-weight: 600;}
.login_wrap .form_wrap {margin-top: 2rem; margin-bottom: 1rem; position: relative;}
.login_wrap .form_wrap .place_holder {position: absolute;font-size: 1.125rem; color:#9a9a9a; left:0; top: 1rem;  z-index: 1; transition: .5s;}
.login_wrap .form_wrap.event.focus .place_holder { transform: translateY(-1.5rem); color: var(--color-purple); font-size: 14px; font-weight: 600;}
.login_wrap .form_wrap.event input:-webkit-autofill,
.login_wrap .form_wrap.event input:-webkit-autofill:hover, 
.login_wrap .form_wrap.event input:-webkit-autofill:focus { background: transparent; -webkit-box-shadow: 0 0 0 1000px #fff inset;}
.login_wrap .form_wrap.event.focus input, 
.login_wrap .form_wrap.event.focus input:focus { outline: none; border-bottom: 2px solid var(--color-purple); }
.login_wrap .form_wrap input { width: 100%; font-size: 1.125rem; font-weight: 500; }
.login_wrap .form_wrap.event input { border-radius: 0; box-shadow: none; padding: 0.85rem 0; border:0; border-bottom: 2px solid #ccc; background: transparent; z-index: 2; font-weight: 500;}
.login_wrap .go_find {display: flex; justify-content: flex-end;}
.login_wrap .go_find a {color:#8a8a8a; font-weight: 500;}
.login_wrap .go_find a:hover {color: var(--color-purple);}
.form_wrap.login_btn input {background: var(--color-purple); color:#fff; font-weight: 500; border:0; font-size: 1.125rem; letter-spacing: -0.05em; padding: 1.125rem 0; cursor: pointer; transition: 0.3s; border-radius: var(--btn-radius);}
.form_wrap.login_btn input:hover { opacity: .8;}
.login_wrap .go_join {display: flex; justify-content: center; align-items: center; padding: 0.85rem 0;}
.login_wrap .go_join span {color: var(--color-gray2); letter-spacing: -0.05em;}
.login_wrap .go_join a {color: var(--color-purple); font-weight: 600; margin-left: 0.65rem;}

	

@media (min-width:991px){
    .wrap { padding-top: 8.5rem; }
	.direct_login_wrap {width:100%; display: flex; justify-content: center; align-items: center;}
	.login_wrap {background: var(--color-wihite); max-width: 37.5rem; width: 100%; padding: 3rem 4.375rem;  box-shadow: 3px 5px 11px 3px rgb(199 186 186 / 50%); transform: translateY(-2rem); border-radius: var(--box-radius)}
}
@media (max-width:990px) { 
	body.Member.DirectLogin {background: #fff;}
	.wrap { padding-top: 6rem;}
	.direct_login_wrap {padding-top: 3rem;}
	.form_wrap.login_btn input {padding:1.35rem 0 ;}
	
	
}
/**** login-(e) ****/

/**** join-(s) ****/
.w_from_wrap {max-width: 1100px; width: 100%;  background: #fff; margin:0 auto; border-radius: 1.5rem; }
.w_from_wrap h2 {font-size: 2.12rem; font-weight: 600; margin-bottom: 3rem;}
.w_from_wrap h3 {display: inline-block; margin-bottom: 1.125rem; font-size: 1.5rem; background-size: 0 0.35rem, 100% 0.35rem;}
.t_c_wrap {margin-bottom: 2.6rem;}
.t_c_wrap > div {display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; width: 100%; max-width: 1100px; border: 1px solid #ccc; border-bottom: 0; font-size: 1.125rem; }
.t_c_wrap > div:first-of-type {border-radius: var(--box-radius) var(--box-radius) 0 0; }
.t_c_wrap > div:last-of-type {border-radius: 0 0 var(--box-radius) var(--box-radius) ; }
.t_c_wrap > div.all_check_wrap.checked span,
.t_c_wrap > div.checked span {color: var(--color-purple);}
.t_c_wrap > div:last-of-type {border-bottom: 1px solid #ccc;}
.t_c_wrap > div label {cursor: pointer;}
.t_c_wrap > div label > input {width: 0.93rem; height: 0.93rem; position: relative; top:1px;}
.t_c_wrap > div label span { color:#777;  font-weight: 500; padding-left: 0.85rem;}
.t_c_wrap > div.call_ok label span > span {display: block; font-size: 1.125rem; font-weight: 400; }
.t_c_wrap > div.all_check_wrap span {font-size: 1.25rem; color:#111; font-weight: 600; padding-left: 0.85rem;}
.t_c_wrap > div.t_c_row label > span::before {content: "(선택)"; padding-right: 0.35rem;}
.t_c_wrap > div.t_c_row.essen label > span::before {content: "(필수)"; color: var(--color-purple); padding-right: 0.35rem;}
.t_c_wrap > div.t_c_row button { color: var(--color-purple); border:1px solid var(--color-purple); font-size: 0.83rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: 2px; transition: 0.3s; }
.t_c_wrap > div.t_c_row button:hover {color:#fff; background: var(--color-purple); }

.mem_info {display: flex; flex-direction: column; border:1px solid #ccc; padding : 0.85rem 1.5rem; margin-bottom: 3.725rem; border-radius:var(--box-radius);  }
.mem_info .mem_info_row {display: flex; padding: 0.65rem 0;  } 
.mem_info .mem_info_row span {font-size: 1rem; font-weight: 500; color: #777; width: 10rem;}
.mem_info .mem_info_row strong {font-size: 1rem; font-weight: 600; color:#111; display: block; width: 100%; flex: 1;}

.mem_info .mem_info_row .tel {display: flex; flex-direction: column; flex:1;}
.mem_info .mem_info_row .tel > div { width: 100%;  font-size: 1rem; font-weight: 400; color:#777; letter-spacing: -0.025em; line-height: 146%; padding: 0.65rem 0; }
.mem_info .mem_info_row .tel > div label {padding-left: 0.5rem; cursor: pointer; color: #111; font-weight: 500;} 
.form_row .form_wrap input:-webkit-autofill,
.form_row .form_wrap input:-webkit-autofill:hover, 
.form_row .form_wrap input:-webkit-autofill:focus { background: transparent; -webkit-box-shadow: 0 0 0 1000px #fff inset;}

.orderComplet .w_from_wrap .order_course .mem_info { margin-bottom: 1rem;}
.orderComplet .w_from_wrap .order_course .mem_info .mem_info_row p {color: var(--color-gray2); font-size: 1rem;}


span.essen::before {content: "*"; color:#ff6600; position: relative; padding-right: 0.5rem; top: 0.25rem;}
.member_form > span.essen { margin-left: 1rem;}
.member_form .place_holder {display: none;}
.form_container  {display: flex; flex-direction: column; border:1px solid #ccc; padding : 0.85rem 1.5rem; margin-bottom: 3.725rem; border-radius: var(--box-radius); }
.member_form .form_row { display: flex; padding:0.65rem 0; }
.member_form .form_row > span {padding: 0.95rem 0; width: 10rem; font-weight: 500; color: #777; }
.member_form .form_row > strong {font-size: 1rem; font-weight: 600; color:#111; padding: 0.95rem 0; }
.member_form .form_row .form_wrap {display: flex;  flex-direction: row; align-items: center; }
.member_form .form_row .form_wrap input[type="text"],
.member_form .form_row .form_wrap input[type="password"],
.member_form .form_row .form_wrap input[type="email"]{border:0; border-bottom: 1px solid #ccc; font-size: 1rem; font-weight: 600; color:#111; padding: 0.5rem 0; width: 18rem;}
.member_form .form_row .form_wrap input[type="text"]:focus, 
.member_form .form_row .form_wrap input[type="password"]:focus, 
.member_form .form_row .form_wrap input[type="email"]:focus {border-bottom: 1px solid var(--color-purple); color:var(--color-purple);}

.form_wrap .description { color:var(--color-purple); margin-left: 1.5rem;}
.member_form .form_row .form_wrap.tel input[type="text"] {width: 5rem; text-align: center;}
.member_form .form_row .form_wrap.tel .bar { width: 1.5rem; text-align: center;}
.member_form .form_row .form_wrap.address { gap: 0.75rem;}
.member_form .form_row .form_wrap.address {flex-direction: column; align-items: flex-start;}
.member_form .form_row .form_wrap.address > div:nth-of-type(1) input[type="text"] {width: 12.5rem;margin-right: 0.5rem;}
.member_form .form_row .form_wrap.address > div:nth-of-type(1) button {color: #fff; background: var(--color-purple); font-size: 0.83rem; font-weight: 500; padding: 0.65rem 0; width: 5rem; border-radius: 3px; transition: 0.3s;}
.member_form .form_row .form_wrap.address > div:nth-of-type(n + 2) span {font-size: 1rem; color:#aaa; margin-left: 0.65rem;}
.form_ft_dec p {font-weight: 400; color:var(--color-gray2); letter-spacing: -0.25px; line-height: 145%; padding-left: 1rem; position: relative;}
.member_form .form_row .form_wrap.address div:last-of-type {width: 100%; font-size: 1rem; font-weight: 400; color: #777; letter-spacing: -0.025em; line-height: 146%; padding: 0.65rem 0;}
.member_form .form_row .form_wrap.address div:last-of-type label {padding-left: 0.5rem; cursor: pointer; color: #111; font-weight: 500;}
.form_ft_dec p::before {content: "-"; position: absolute; left:0; top: 0;}
.form_ft_dec p.danggu.em {color: #ff6600; font-weight: 500;}
.form_ft_dec p.danggu::before {content: '※'}

.pg_type > label {display: flex; justify-content: center; align-items: center; color: #fff; background: var(--color-purple); font-size: 1rem; font-weight: 500; padding: 0.875rem 0; width: 7rem; border-radius: 3px;  transition: 0.3s;}
.pg_type > label::before { content: '\f058'; font : var(--fa-font-solid);  padding-right: 5px}
.pg_type > label > input[type="radio"] {display: none; }

.order_ft_dec { margin-bottom: 2.6rem; display: flex;  }
.order_ft_dec > strong {color:#ff6600; font-size: 2rem; font-weight: 900; letter-spacing: -0.25px;}
.order_ft_dec > strong span {color:var(--color-black); font-size: 1.125rem; padding-left: 5px}
.refund_wrap {width: 100%; padding-top: 1.5rem; }
.refund_wrap > a {color:var(--color-gray2); font-weight: 500; transition: 0.3s; border-bottom: 1px solid #ccc; line-height: 180%; cursor: pointer;}

.refund_wrap > a:hover {color:var(--color-black); border-bottom-color: #787878; }

.join_btn {max-width: 1100px; width: 100%; margin: 3rem auto 0; display: flex ; justify-content: center; align-items: center; gap: 0.5rem;}
.join_btn button {display: flex; font-weight: 600; justify-content: center; align-items: center; border-radius: 0.25rem; padding: 1.5rem; width: 50%; max-width: 16rem; transition: 0.3s; font-size: 1.125rem;  }
.join_btn button[type="button"] {background: #d1d1d1; color:#787878; }
.join_btn button[type="submit"] {background: var(--color-inno-blue); color:#fff;}
.join_btn button.btn_1st {background: var(--color-inno-blue); color:#fff;}
.join_btn button.btn_2st {background: var(--color-purple); color:#fff;}

.orderFind .w_from_wrap h2 { margin-bottom: 2rem; }
.orderFind .w_from_wrap .form_ft_dec {padding-bottom: 1.5rem;}
.orderFind .w_from_wrap .btn_wrap  {display: flex; justify-content: center; width: 100%;}
.orderFind .form_container { margin-bottom: 1rem; } 
.orderFind .w_from_wrap .btn_wrap .btn_2st { background: var(--color-purple); color: #fff; display: flex; font-weight: 600;    justify-content: center; align-items: center; border-radius: 0.25rem; padding: 1.15rem 1.5rem; width: 50%; max-width: 16rem;   transition: 0.3s; font-size: 1.125rem;}

.Member.DirectRegisterOk main { justify-content: center; align-content: center; }
.Member.DirectRegisterOk .registerOk { display: flex; flex-direction: column; justify-content: center; align-content: center; text-align: center}
.Member.DirectRegisterOk .registerOk strong {font-size: 3rem; color: var(--color-black); padding-bottom: 0.85rem; font-weight: 600;} 
.Member.DirectRegisterOk .registerOk span {line-height: 1.4; font-size: 1.25rem; color: var(--color-gray2);}
.Member.DirectRegisterOk .registerOk img {max-width: 12rem; margin: 0 auto;}

@media (min-width:991px){
	.w_from_wrap {max-width: 1100px; background: #fff; margin: 2rem auto 0; padding: 3.5rem 5rem; box-shadow: 3px 5px 11px 3px rgb(199 186 186 / 50%);}
	.t_c_wrap > div.t_c_row button::before {content: "전문";}
	
	.member_form .form_row > span {padding-left: 1rem; position: relative;}
	.member_form .form_row > span.essen::before { position: absolute; left:0; top: calc(0.95rem + 2px);}
	.t_c_wrap > div.call_ok label span > span { padding: 0.75rem 0 0.5rem 2rem;}
	.quote_confirm .join_btn button.btn_2st::before { content: "견적서"; padding-right: 0.25rem; }
}

@media (max-width:990px){
	body.Member.DirectRegister {background: #fff;}
	.w_from_wrap h2 {font-size: 1.85rem; margin-bottom: 2rem;}
	.w_from_wrap h3 { font-size: 1.35rem; margin-bottom: 0.875rem;}
	
	.t_c_wrap > div  { padding: 1rem;}	
	.t_c_wrap > div label {display: flex; width: calc(100% - 3.5rem);}
	.t_c_wrap > div.all_check_wrap span {padding-left: 0.65rem;}
	.t_c_wrap > div.t_c_row {padding: 0.85rem 1rem;}
	.t_c_wrap > div.t_c_row label > span {padding-left: 2.625rem; margin-left: 0.65rem; position: relative; width: calc(100% - 2.625rem); line-height: 135%;}
	.t_c_wrap > div.t_c_row label > span::before  {position: absolute; left:0; }
	.member_form .form_row .form_wrap {flex-direction: column;     align-items: flex-start;}
	.form_wrap .description {margin-left: 0; padding: 0.65rem 0;}
	.join_btn {margin-top: 2rem;}
	.join_btn button {max-width: 100%; width: calc(50% - 0.25rem); }
	.quote .t_c_wrap > div.t_c_row label > span {width: calc(100% - 2rem); display: inline-block;}
	.t_c_wrap > div.call_ok label span > span { padding: 0.5rem 0;}
	.member_form > span.essen {margin-left: 0.5rem;}
	.orderFind .join_btn,
	.quote_confirm .join_btn {flex-wrap: wrap;}
	.orderFind .w_from_wrap .btn_wrap .btn_2st {width:100%; max-width: 100%; margin-bottom: 2.5rem;}
	.orderFind .join_btn .btn_1st,
	.quote_confirm .join_btn .btn_1st {width: 100%;}
	.mem_info{ border-radius: var(--sm-radius);}
	.member_form .form_row .form_wrap.event input[type="text"], 
	.member_form .form_row .form_wrap.event input[type="password"], 
	.member_form .form_row .form_wrap.event input[type="email"] {padding: 0.25rem 0;  }
	.orderComplet .w_from_wrap .order_course .mem_info {margin-bottom:0.5rem;  background: #eeedf1;  }
	.orderComplet .w_from_wrap .order_course .mem_info .mem_info_row:nth-of-type(1) {padding-bottom: 0;}
	.orderComplet .w_from_wrap .order_course .mem_info .mem_info_row p {width: 100%; font-size: 0.875rem; line-height: 135%;}
}

@media (max-width:660px){
	.mem_info .mem_info_row span,
	.orderComplet .w_from_wrap .order_course .mem_info span {width: 6rem;}
	.orderComplet .mem_info .mem_info_row span {width: 7rem;}
	.t_c_wrap > div.all_check_wrap span,
	.t_c_wrap > div.t_c_row label > span,
	.t_c_wrap > div.call_ok label span > span { font-size: 1rem;}
	.member_form .form_container {margin-bottom: 2.6rem;}
	.orderFind .member_form .form_container {margin-bottom: 1rem;}
	.member_form .form_container.join .place_holder {display: block;}
	.member_form .form_row {padding: 0.25rem 0;}
	.member_form .form_row > span {display: none;}
	.member_form .form_row .form_wrap {padding:1.25rem 0 0.5rem 0;}
	.member_form .form_row .form_wrap input[type="text"], 
	.member_form .form_row .form_wrap input[type="password"], 
	.member_form .form_row .form_wrap input[type="email"] {width: 100%; border-bottom: 2px solid #ccc; }
	
	.member_form .form_row .form_wrap input[type="text"]:focus, 
	.member_form .form_row .form_wrap input[type="password"]:focus, 
	.member_form .form_row .form_wrap input[type="email"]:focus {border-bottom: 2px solid var(--color-purple);}
	
	.member_form .form_wrap {position: relative; width: 100%;}

	.member_form .form_row .form_wrap.tel .bar {display: none;}
	.place_holder.essen { margin-left: 0; }
	.member_form .form_wrap .place_holder {position: absolute; font-size: 1rem; color:#9a9a9a; left:0; top: 1rem;  z-index: 1; transition: .5s;}	
	.member_form .form_wrap.event.focus .place_holder { transform: translateY(-1.25rem); color: var(--color-purple); font-size: 14px; font-weight: 600;}
	.member_form .form_row .form_wrap.tel > div  { display: flex ;justify-content: space-between; width: 100%;}
	.member_form .form_row .form_wrap.tel input[type="text"] {width: calc(33.3% - 1rem);}
	
	.member_form .form_row .form_wrap.address > div {width: 100%;}
	.member_form .form_row .form_wrap.address > div:nth-of-type(1) input[type="text"] {width: calc(100% - 6rem);}
	.member_form .form_row .form_wrap.address > div:nth-of-type(n+2) {padding: 1rem 0 0.5rem 0;}
	.member_form .form_row .form_wrap.address > div:nth-of-type(n+2) input[type="text"] {width: calc(100% - 6rem);}
	.member_form .form_row .form_wrap.address > div:last-of-type {padding-bottom: 0;}
	.quote .t_c_wrap > div.t_c_row.call_ok label > span {width: 100%;}	
	.pg_type > label {font-size: 0.875rem; padding: 0.625rem; }
	
	.join_btn  {margin: 0; }
	.join_btn button {padding: 1.125rem 0;}
	
	.Member.DirectRegisterOk .registerOk strong  {font-size: 8vw;}
	.Member.DirectRegisterOk .registerOk span {font-size: 1rem;}
	.Member.DirectRegisterOk .join_btn,
	.Member.DirectRegisterOk .join_btn button {width: 100%; max-width: 21.25rem;  margin: 1rem auto 0;}
}
	
@media (max-width: 350px) {			
	.Member.DirectRegisterOk .registerOk span br {display: none;}
}

/*find*/

.innner_box_wrap h2 {font-size: 2.12rem; font-weight: 600; margin-bottom: 2.6rem;}
.inner_box { display: flex; justify-content: space-between; }
.inner_box .findbox { display: flex; flex-direction: column; flex: 1 ; padding: 1rem 2rem 2rem 2rem; position: relative;}
.inner_box .findbox strong {font-weight: 600; font-size: 1.375rem; color: var(--color-purple); letter-spacing: -0.025em;}
.inner_box .findbox span { font-size: 1rem; line-height: 135%; color:var(--color-gray2); font-weight: 400; padding: 1rem 0; letter-spacing: -0.05em; min-height: 5rem;}
.inner_box .findbox button {width: 100%; font-size: 1rem; font-weight: 500; padding: 1.25rem 0; border-radius: var(--btn-radius); transition: 0.3s;}
.inner_box .findbox button::after {content: "\f105"; font:var(--fa-font-solid); padding-left: 0.25rem;}
.inner_box .findbox button::before {padding-right: 0.375rem;}
.inner_box .findbox.simple button {background: #18ac8a; color:#fff; }
.inner_box .findbox.tel button {background: #f83042; color:#fff; }
.inner_box .findbox.ipin button {background: #6680DC;  color:#fff; }
.inner_box .findbox.simple button::before {content: "\f4fc"; font:var(--fa-font-solid);}
.inner_box .findbox.tel button::before {content: "\f3cd"; font:var(--fa-font-solid);}
.inner_box .findbox.ipin button::before {content: "\f129"; font:var(--fa-font-solid);}
.inner_box .findbox button:hover { opacity: .8; }
.inner_box .findbox em {font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: #4073c9; position: relative; top: 1rem; padding-left: 1rem;}
.inner_box .findbox em::before {content: "\f05a"; font:var(--fa-font-solid); position: absolute; left:0; top:0;}
.DirectAuthCheck .innner_box_wrap > span {font-size: 1.125rem; font-weight: 400; color:#787878; line-height: 128%; display: block; margin-top: -1.5rem; padding-bottom: 3rem;}

.def_form .form_wrap {margin-top: 2rem; margin-bottom: 1rem; position: relative;}
.def_form .form_wrap .place_holder {position: absolute;font-size: 1.125rem; color:#9a9a9a; left:0; top: 1rem;  z-index: 1; transition: .5s;}
.def_form .form_wrap.event.focus .place_holder { transform: translateY(-1.5rem); color: var(--color-purple); font-size: 0.875rem; font-weight: 600;}
.def_form .form_wrap.event input:-webkit-autofill,
.def_form .form_wrap.event input:-webkit-autofill:hover, 
.def_form .form_wrap.event input:-webkit-autofill:focus { background: transparent; -webkit-box-shadow: 0 0 0 1000px #fff inset;}
.def_form .form_wrap.event.focus input, 
.def_form .form_wrap.event.focus input:focus { outline: none; border-bottom: 2px solid var(--color-purple); }
.def_form .form_wrap input { width: 100%; font-size: 1.125rem; font-weight: 500; }
.def_form .form_wrap.event input { border-radius: 0; box-shadow: none; padding: 0.85rem 0; border:0; border-bottom: 2px solid #ccc; background: transparent; z-index: 2; font-weight: 500;}
.def_form .form_wrap .description { display: flex; margin-left: 0; padding-top: 0.875rem;}
.def_form .form_wrap.tel input[type="text"] {width: calc(33.3% - 1rem);}
.def_form .form_wrap.submit_btn button {background: var(--color-purple); border:1px solid var(--color-purple); color:#fff; font-weight: 500; font-size: 1.125rem; letter-spacing: -0.05em; padding: 1.35rem 0; cursor: pointer; transition: 0.5s; width: 100%; border-radius: var(--btn-radius);}

.def_form .form_wrap.onlytext span {font-size: 1rem; font-weight: 500; color: #777; margin-right: 1rem;}
.def_form .form_wrap.onlytext strong { font-size: 1rem; font-weight: 600; color: #111; width: 100%;}
.def_form > div .bur {border-bottom: 2px solid #222; margin:1rem 0; }
.def_form > div:nth-last-of-type(2) .bur {display: none}

.inner_btn_wrap {display: flex; justify-content: center; padding-top: 2.5rem; gap: 0.5rem; }
.inner_btn_wrap button,
.inner_btn_wrap a {display: flex; font-weight: 600; justify-content: center; align-items: center; border-radius: 0.25rem; padding: 1.5rem 0; width: 50%; max-width: 15rem; font-size: 1.125rem; background: #fff; border:1px solid #aaa; transition: 0.3s; }



@media (min-width:991px){
	body.Direct.PaymentFind main,
	body.Direct.OrderComplet main,
	body.Direct.QuoteConfirm main,
	body.Direct.OrderFind main,
	body.Direct.Order main,
	body.Direct.Quote main,
	body.Member.DirectInfo main,
	body.Member.DirectFindResult main,
	body.Member.DirectFindSimple main,
	body.Member.DirectFind main,
	body.Member.FindSimple main,
	body.Member.DirectAuthCheck main { display: flex; justify-content: center; align-items: center;}
	.innner_box_wrap {max-width: 1100px; background: #fff; margin: 2rem auto 0; padding: 3.5rem 5rem; box-shadow: 3px 5px 11px 3px rgb(199 186 186 / 50%); border-radius: var(--box-radius);}
	.innner_box_wrap.sm {max-width: 37.5rem;}
	body.Member.DirectFind .findbox:nth-of-type(2)::before {content: ""; position: absolute; width: 1px; height: 100%; background: #ddd; top:0; left:0;}
	.DirectAuthCheck .inner_box .findbox:nth-of-type(1)::after,
	body.Member.DirectFind .findbox:nth-of-type(2)::after {content: ""; position: absolute; width: 1px; height: 100%; background: #ddd; top:0; right:0; }
	.DirectAuthCheck .inner_box .findbox:nth-of-type(1) {padding-left: 0;}
	.DirectAuthCheck .inner_box .findbox:nth-of-type(2) {padding-right: 0;}
	.def_form .form_wrap.submit_btn button:hover,
	.inner_btn_wrap button:hover,
	.inner_btn_wrap a:hover { background: var(--color-purple); color:#fff;  border:1px solid var(--color-purple) }
}

@media (max-width:990px){
	body.Direct.PaymentFind,
	body.Direct.OrderComplet,
	body.Direct.QuoteConfirm,
	body.Direct.OrderFind,
	body.Direct.Order,
	body.Direct.Quote,
	body.Member.DirectInfo,
	body.Member.DirectFindResult,
	body.Member.DirectFindSimple,
	body.Member.DirectFind,
	body.Member.FindSimple,
	body.Member.DirectAuthCheck {background: #fff;}
	.inner_box { flex-wrap: wrap; gap : 1rem; }
	.inner_box .findbox {border: 1px solid #ccc;}
	.DirectFind .inner_box .findbox:first-child {flex-basis: 100%; width: 100%;}
	.inner_box .findbox span {min-height: auto;}
	.inner_btn_wrap {width: 100%; padding-top: 1rem;}
	.inner_btn_wrap button,
	.inner_btn_wrap a { max-width: 100%; width: 100%;}	
	body.Member.DirectFindResult .inner_btn_wrap,
	body.Member.DirectFindSimple .inner_btn_wrap {display: none;}
}

@media (max-width:660px){
	body.Direct.PaymentFind section,
	body.Direct.OrderComplet section,
	body.Direct.QuoteConfirm section,
	body.Direct.OrderFind section,
	body.Direct.Order section,
	body.Direct.Quote section,
	body.Member.DirectInfo section,
	body.Member.DirectFindResult section,
	body.Member.DirectFindSimple section,
	body.Member.DirectFind section,
	body.Member.FindSimple section,
	body.Member.DirectAuthCheck section {padding-bottom: 2rem;}
	.inner_box {flex-direction: column; gap : 1rem; }
	.inner_box .findbox span {min-height: auto;}
	.inner_box .findbox {border: 1px solid #ccc; padding: 1rem 1.25rem 2rem 1.25rem;}
	.DirectAuthCheck .innner_box_wrap > span {font-size: 1rem;}
	.DirectAuthCheck .innner_box_wrap > span br {display: none;}
	
}

/*간편견적받기*/
.selection_course,
.order_course {margin-bottom: 2.6rem;}
.def_table .row {display: flex; align-items: center; } 
.def_table .row span {text-align: center; padding: 0 0.875rem; color:var(--color-gray2); font-weight: 500;}
.produtDel::before {content: '\f057';font-size: 1.125rem; font : var(--fa-font-solid); color:var(--color-gray2); transition: 0.3s;}
.produtDel:hover::before {color: var(--color-purple);}
.def_table .row.th { background: #eeedf1; border-radius:  0.5rem; padding: 0.875rem 0;}
.def_table .row.th span {color:#9d9d9d; font-size: 0.93rem; }
.def_table .row.td {padding: 1rem 0; border-bottom: 1px solid #ddd;}
.def_table .row.td span {line-height: 135%;}

.selection_course .row span:nth-of-type(1) {width: 3rem;}
.selection_course .row span:nth-of-type(2) {width: 8rem;}
.selection_course .row span:nth-of-type(3) {width: calc(100% - 35rem);}
.selection_course .row.td span:nth-of-type(3) {text-align: left;}
.selection_course .row.td span:nth-of-type(3) {color:var(--color--black);}
.selection_course .row span:nth-of-type(4) {width: 10rem;}
.selection_course .row.td span:nth-of-type(4) .personnel_btn {justify-content: center;}
.selection_course .row span:nth-of-type(5) {width: 7rem;}
.selection_course .row span:nth-of-type(6) {width: 7rem; }
.selection_course .row.td span:nth-of-type(5) {text-align: center; }
.selection_course .row.td span:nth-of-type(6) {text-align: right; color:#ff6600;}

.order_course .row span:nth-of-type(1) {width: 8rem; }
.order_course .row span:nth-of-type(2) {width: calc(100% - 29rem);}
.order_course .row.td span:nth-of-type(2) {text-align: left;}
.order_course .row.td span:nth-of-type(2) {color:var(--color--black);}
.order_course .row span:nth-of-type(3) {width: 7rem;}
.order_course .row span:nth-of-type(4) {width: 7rem;}
.order_course .row span:nth-of-type(5) {width: 7rem; }
.order_course .row.td span:nth-of-type(4) {text-align: right; }
.order_course .row.td span:nth-of-type(5) {text-align: right; color:#ff6600;}

.def_table .row.tf {justify-content: flex-end; padding: 1.125rem 0;}
.def_table .row.tf > span {text-align: right; width: 100%; font-weight: 600; color:var(--color-black); padding-right: 1rem; } 
.def_table .row.tf > span strong { color:#ff6600; font-weight: 900; } 
.def_table .row.tf > span strong::after {content: "원"; padding-left: 0.25rem; color:var(--color-black); }
.def_table .row.tf > span::before {content: "최종 교육비"; padding-right: 2rem; font-weight: 700; color:var(--color-black); }
.order_course.def_table .row.tf > span::before {content: "최종 교육비";  }

.def_table .row.tf1 {justify-content: flex-end; padding: 1.125rem 0 0 0 ; text-decoration: line-through;}
.def_table .row.tf1 > span {text-align: right; width: 100%; font-weight: 600; color:var(--color-gray2); padding-right: 1rem; } 
.def_table .row.tf1 > span strong { color:var(--color-gray2); font-weight: 900; } 
.def_table .row.tf1 > span strong::after {content: "원"; padding-left: 0.25rem; color:var(--color-gray2); }
.def_table .row.tf1 > span::before {content: "최종 교육비"; padding-right: 2rem; font-weight: 700; color:var(--color-gray2); }
.order_course.def_table .row.tf1 > span::before {content: "최종 교육비";  }


.def_table .row.tf0 {justify-content: flex-end; padding: 1.125rem 0;}
.def_table .row.tf0 > span {text-align: right; width: 100%; font-weight: 600; color:var(--color-black); padding-right: 1rem; } 
.def_table .row.tf0 > span strong { color:#ff6600; font-weight: 900; } 
.def_table .row.tf0 > span strong::after {content: "원"; padding-left: 0.25rem; color:var(--color-black); }
.def_table .row.tf0 > span::before {content: "최종 할인가"; padding-right: 2rem; font-weight: 700; color:var(--color-black); }
.order_course.def_table .row.tf0 > span::before {content: "최종 할인가";  }




.quote .w_from_wrap .info_dec,
.quote .w_from_wrap .form_container {margin-bottom: 1rem;}
.quote .t_c_wrap {margin-bottom: 0;}

.btm_form {display: flex; align-items: flex-start; }
.btm_form > div:first-child {padding-right: 3.725rem; margin-right: 3.725rem; border-right: 1px solid #ddd;}

.order .order_course {margin-bottom: 3.725rem;}
.quote_confirm .order_course {margin-bottom: 0;}
.quote_confirm .form_ft_dec { margin-bottom: 1rem;  margin-top: 2rem;}

.PaymentFind .def_table .orderCode {width: 25%;}
.PaymentFind .def_table .orderDate {width: 16%;}
/*.PaymentFind .def_table .quoteCode {width: 17%;}*/
.PaymentFind .def_table .price {width: 11%;}
.PaymentFind .def_table .pgType {width: 11%;}
.PaymentFind .def_table .pgStep {width: 11%;}
.PaymentFind .def_table .bntWrap {width: 13%;}
.PaymentFind .def_table .refund {width: 13%;}
.PaymentFind .def_table .bntWrap { display: flex; flex-direction: column; gap: 4px;}
.PaymentFind .def_table .pgStep.step1 {color:#7a6eff;}
.PaymentFind .def_table .pgStep.step2 {color:#ff4e51;}


.PaymentFind .def_table .row.td .btn {  width:100%; font-size: 0.875rem; padding: 0.4rem 0; border-radius: 4px; font-weight: 400; transition: 0.3s;}
.PaymentFind .def_table .row.td .bntWrap .btn {border:1px solid var(--color-purple); color:var(--color-purple);}
.PaymentFind .def_table .row.td .bntWrap .btn:hover {background: var(--color-purple); color:#fff;}
.PaymentFind .def_table .row.td .refund .btn {background: #b6b6b6; color:#fff; }
.PaymentFind .form_ft_dec {padding-top: 1rem}

#refund_form .modal-content {max-width: 800px;}
#refund_form .form_row > span {font-weight: 600; color: var(--color-black); padding-bottom: 0.5rem; display: inline-block; font-size: 1.125rem;}
#refund_form .form_row:last-of-type {padding-top: 1rem;}
#refund_form .form_wrap textarea {width: 100%; min-height: 6rem; padding: 1rem;}
#refund_form .form_wrap textarea,
#refund_form .form_wrap input {border: 1px solid #ddd; border-radius: var(--btn-radius);  background: #fff; }
#refund_form .form_wrap.tel > div {width: 100%; display: flex; justify-content: space-between; align-items: center;}
#refund_form .form_wrap.tel input { width: calc(33.3% - 1rem); padding: 0.5rem;}
#refund_form .form_wrap.tel > div span {width: 1rem; font-size: 0.875rem; display: flex; align-content: center; justify-content: center;}
#refund_form .modla_footer { gap : 4px;}
.t_c_view .modla_footer button.dis {background: var(--color-gray2); border-color:  var(--color-gray2);}
@media (min-width:991px){
	.PaymentFind .def_table .refund.none_data::after { content: '-';}
}
@media (max-width: 1240px){
	.PaymentFind .def_table .row span {padding: 0 0.5rem;}
	.PaymentFind .def_table .price {width:11%;}
	.PaymentFind .def_table .quoteCode {width: 16%;}
}
@media (max-width:990px){
	.def_table .row.th {display: none;}
	.def_table .row.td {border: 1px solid #ccc; border-radius: var(--sm-radius); ;position: relative; flex-direction: column; align-items: flex-start; padding: 1rem 1.625rem; }
	.order_course.def_table .row.td {flex-direction: row; flex-wrap: wrap;}
	.def_table .row.td {margin-bottom: 0.5rem;}
	.def_table .row.td span {text-align: left; padding: 0.35rem 0; }
	
	.selection_course .row.td span:nth-of-type(1) { position: absolute; top:1rem; right:1.625rem; display: flex; justify-content:flex-end;}
	.selection_course .row.td span:nth-of-type(2) { width: calc(100% - 3rem) ;}
	.selection_course .row.td span:nth-of-type(3) { width: 100% ; font-size: 1.25em; padding: 0 0 0.875rem 0;}
	.selection_course .row.td span:nth-of-type(4) { width:100%; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ccc; padding-top:  0.875rem;}
	.selection_course .row.td span:nth-of-type(4)::before {content: "인원선택"; }
	.selection_course .row.td span:nth-of-type(5) { width:100%; display: flex; justify-content: space-between; align-items: center; }
	.selection_course .row.td span:nth-of-type(5)::before {content: "교육비"; }
	.selection_course .row.td span:nth-of-type(6) { width:100%; display: flex; justify-content: space-between; align-items: center;}
	.selection_course .row.td span:nth-of-type(6)::before {content: "총금액"; color: var(--color-gray2); }
	
	.order_course .row.td span {width: 100%;}
	.order_course .row.td span:nth-of-type(1) {padding-bottom: 0; color: var(--color-purple)}
	.order_course .row.td span:nth-of-type(n + 3) {display: flex; width: auto; align-items: center; }	
	.order_course .row.td span:nth-of-type(n + 3)::before {padding-right: 0.25rem;}
	.order_course .row.td span:nth-of-type(n + 3)::after {content: "/"; padding: 0 0.5rem;}
	.order_course .row.td span:nth-of-type(3)::before {content: "인원 :"; }
	.order_course .row.td span:nth-of-type(4)::before {content: "교육비 :"; }
	.order_course .row.td span:nth-of-type(5)::before {content: "총금액 :"; color: var(--color-gray2); }
	.order_course .row.td span:nth-of-type(5)::after {display: none;}
	.def_table .row.tf {padding: 0.5rem 0.25rem 0 0.25rem; }
	.def_table .row.tf > span {display: flex; justify-content: space-between; font-size: 1.25rem; padding:0;}
	
	.def_table .row.tf0 {padding: 0.5rem 0.25rem 0 0.25rem; }
	.def_table .row.tf0 > span {display: flex; justify-content: space-between; font-size: 1.25rem; padding:0;}
	
	.def_table .row.tf1 {padding: 0.5rem 0.25rem 0 0.25rem; }
	.def_table .row.tf1 > span {display: flex; justify-content: space-between; font-size: 1.25rem; padding:0;}
	
	.PaymentFind .def_table .row.td{
		--mb-r-pd : 6rem;		
	}
	.PaymentFind .def_table .row.td {flex-wrap: wrap; flex-direction: row; align-items: center;}
	.PaymentFind .def_table .row.td .orderCode,
	.PaymentFind .def_table .row.td .orderDate,
	.PaymentFind .def_table .row.td .quoteCode {width: 100% ; padding-right: var(--mb-r-pd); color:#121212;}
	.PaymentFind .def_table .orderCode::before {content: '주문번호 : '; color: var(--color-gray2);}
	.PaymentFind .def_table .orderDate::before {content: '주문일자 : '; color: var(--color-gray2);}
	.PaymentFind .def_table .row.td .orderCode br {display: none;}
	.PaymentFind .def_table .quoteCode::before {content: '견적번호 : '; color: var(--color-gray2);}
	.PaymentFind .def_table .price,
	.PaymentFind .def_table .pgType,
	.PaymentFind .def_table .pgStep {width: auto; color:#121212;}
	.PaymentFind .def_table .pgStep {color:  var(--color-gray2);}
	.PaymentFind .def_table .price::before {content: '가격 : '; color: var(--color-gray2);}
	.PaymentFind .def_table .price::after {content: '/'; padding: 0 0.5rem; ; color: var(--color-gray2);}
	.PaymentFind .def_table .pgType::before {content: '결제방법 : ';; color: var(--color-gray2);}
	.PaymentFind .def_table .pgStep::before {content: '['; padding-left: 4px;}
	.PaymentFind .def_table .pgStep::after {content: ']'; }
	.PaymentFind .def_table .row.td .refund {width: 100%; padding-right:  var(--mb-r-pd);}
	.PaymentFind .def_table .row.td .refund::before { content: '취소/환불 : '; }
	.PaymentFind .def_table .row.td .refund.none_data,
	.PaymentFind .def_table .row.td .refund.none_data::before { display: none;}
	.PaymentFind .def_table .row.td .refund .btn  { width: auto; padding: 0; color: var(--color-gray2); border-bottom: 1px solid #ccc; background: transparent; border-radius: 0; font-size: 1rem;}
	.PaymentFind .def_table .row.td .bntWrap { position: absolute; top: 0; right: 0; border-left:1px solid #ccc; height: 100%;  padding : 0 1rem; display: flex; flex-direction: column; justify-content: center; align-content: center;  gap: 4px; width: calc(7rem - 1px);}
	.PaymentFind .def_table .row.td .bntWrap .btn { color: #fff; background: var(--color-purple);}
	.form_ft_dec {padding-bottom: 1rem;}
	.join_btn button {font-size: 1rem;}
	.quote_confirm .form_ft_dec { padding: 1rem 0 ;}
	.order .join_btn button[type="submit"],
	.quote .join_btn button[type="submit"] {width: 100%;}
	.produtDel::before {content: '\58'; font-size: 1.25rem; font: var(--fa-font-regular);}
	
	.selection_course, .order_course {margin-bottom: 4rem;}
	.quote .w_from_wrap .info_dec, .quote .w_from_wrap .form_container {margin-bottom: 0.625rem;}
	
	.btm_form { flex-direction:  column;}
	.btm_form > div {display: flex; align-items: center;  justify-content: flex-start; column-gap: 2rem; padding: 1.75rem 0;}
	.btm_form > div h3 {margin-bottom: 0;}
	.btm_form > div:first-child {padding-right: 0; margin-right: 0; border-right: 0;}
	.order_ft_dec {margin-bottom: 0;}
	.refund_wrap {margin-bottom: 2.6rem; padding-top: 0.5rem;}

	.order .w_from_wrap  div:nth-last-of-type(3) .form_container { margin-bottom: 1rem;  }
}
@media (max-width: 660px){
	.def_table .row.td {padding:1rem;}	
	.selection_course .row.td span:nth-of-type(1) {right: 1rem;}
	.selection_course .row.td span:nth-of-type(3),
	.def_table .row.tf > span {font-size: 1.125rem;}
	.def_table .row.tf1 > span {font-size: 1.125rem;}
	.def_table .row.tf0 > span {font-size: 1.125rem;}	
	.quote .t_c_wrap {margin-bottom: 1rem;}
	.t_c_wrap > div:first-of-type {border-radius: var(--sm-radius) var(--sm-radius) 0 0;}
	.t_c_wrap > div:last-of-type {border-radius: 0 0 var(--sm-radius) var(--sm-radius);}
	.order_ft_dec > strong {font-size: 1.5rem;}
	.btm_form > div { padding: 1rem 0;}	
	.order_course .row.td span:nth-of-type(n + 3) { font-size: 0.875rem; }	
	.PaymentFind .def_table .price::after {display: none;}
	.PaymentFind .def_table .row.td .price {width: 100% ; padding-right: var(--mb-r-pd); color:#121212;}
}


/**************************************************************************************************
										FAQ
***************************************************************************************************/
.dff_tab {display: flex; gap: 0.312rem; flex-wrap: wrap; }
.dff_tab button {height: 2.6rem; line-height: 2.6rem; font-size: 0.937rem; border: 1px solid #ccc; padding: 0 2.875rem; font-weight: 500; color:#232323; transition: 0.5s; border-radius: 100rem; background: #fff;}
.dff_tab button.has {background: var(--color-purple); color: var(--color-wihite); border-color: var(--color-purple); }

.dff_search {border-bottom: 2px solid var(--color-black); padding: 0.68rem 0.62rem 0.68rem 0; width:100%; max-width: 20rem;}
.dff_search input {border:0; width: calc(100% - 1.5rem);}
.dff_search .search_btn { width: 1.15rem;} 
.dff_search .search_btn svg {position: relative; top:1px;}

.faq_list li:first-of-type {border-top:1px solid #ccc;}
.faq_list li {border-bottom: 1px solid #ccc; letter-spacing: -0.25px; font-weight: 400; }
.faq_list li.hidden {display: none;}
.faq_list li.none_list {border-top: 1px solid #ccc; padding: 1.625rem 3rem ; text-align: center; font-size: 1.375rem; color:#5f5f5f;}


.faq_q {padding: 1.625rem 3rem; font-size: 1.375rem; color:#49464E; transition: 0.5s; cursor: pointer; position: relative;}
.faq_q span {margin-right: 0.5rem;}

.faq_q:hover {color:#000;}
.faq_q::before {content: "Q"; color: #7163BA; font-size: 1.875rem; font-weight: 700; margin-right: 1rem; display: inline-block; width: 2.5rem; text-align: center;}
.faq_q::after {content: '\f0dd'; font:var(--fa-font-solid); display: flex; justify-content: center; align-items: flex-start; width: 1.875rem; height: 1.875rem; position: absolute; top: 1.625rem ; right: 3rem; color: var(--color-purple); transform: rotate(0) translateY(0); transition: 0.4s;}
.faq_q.on::after {transform: rotate(180deg) translateY(-4px); }


.faq_a{ overflow: hidden; height: 0; transition: 0.5s ease; background: #e9e7f1; box-sizing: border-box; position: relative;}
.faq_a pre { font-size: 1rem; margin: 1.625rem 3rem; line-height: 188%; font-weight: 300; letter-spacing: -0.25px; color:#49464E; display: flex;}
.faq_a pre::before{content: "A"; color: #777; font-size: 1.875rem; font-weight: 700;  width: 2.5rem; text-align: center; }
.faq_a > div{ font-size: 1rem; margin: 1.625rem 2.5rem; line-height: 188%; font-weight: 300; letter-spacing: -0.25px; color:#49464E; display: block; padding-left: 3.8rem;}
.faq_a > div::before{content: "A";display: block; color: #777; font-size: 1.875rem; font-weight: 700; margin-right: 1rem; width: 2.5rem; text-align: center; position: absolute; top:1.625rem; left:3rem}
.faq_a > div p { color: #777; }
.faq_a > div p b {font-weight: 600; color:#222 }

@media (max-width:1280px) { 
	.faq .contents_top {flex-direction: column; align-items: flex-start;}
	.dff_tab { flex-wrap: wrap; }
	.dff_search{  font-size: 1.4rem; max-width: 21.875rem;}
	.faq .dff_search {margin-top: 1rem; margin-bottom: 2rem; order:-1;}	
	.faq_list li.none_list,
	.faq_q {padding: 1.625rem 1.5rem}
	.faq_q {padding-right: 3.5rem;}
	.faq_q::after {top: 1.625rem ; right: 1.5rem;}
	.faq_a pre {margin: 1.625rem 1.5rem;}
	.faq_a pre::before,
	.faq_q::before {margin-right: 0.65rem}
}
@media (max-width:660px) { 
	.contents_top {gap : 1rem;}
	.faq .contents_info { display: none;}	
	.faq_q span {display: none;}
	.faq .dff_search { display: flex; justify-content: space-between; margin: 0; width: 100%; max-width: 100%; margin-top: 2.5rem;}
	.faq .dff_search input {font-size: 1rem; width: calc(100% - 1rem);}
	.dff_search .search_btn {width: 1rem;}
	
	.dff_tab {gap: 5px}
	.dff_tab button {font-size: 0.875rem; padding: 0 1.5rem;  border: 1px solid #ccc; height: 2rem; line-height: 2rem; }
	.faq_list {margin-top: 1rem;}
	.faq_list li.none_list {padding: 1.15rem 1rem;  font-size: 1.125rem;}
	.faq_q {padding: 1.15rem 1rem; display: flex;  font-size: 1.125rem; font-size: 1rem; padding-right: 2.5rem; line-height: 140%;  align-items: flex-start;}

	.faq_q::after {top: 1.15rem ; right: 0.5rem;}
	.faq_q.on::after {transform: rotate(180deg) translateY(4px);}
	.faq_a pre { margin: 1.15rem 1rem; font-size: 1rem;  }
	.faq_a pre::before,
	.faq_q::before {width: 1rem; margin-right: 0.5rem; font-size: 1.125rem;}
	.faq_q::before {}
		
	.faq_a > div { font-size: 1rem; margin: 1.15rem; color:#49464E; display: block; padding-left: 0;}
	.faq_a > div::before{ display: none;}
	.faq_a > div p,
	.faq_a > div p span {font-size: 0.875rem !important; line-height: 148% !important;}
	
}
/**** faq-(e) ****/

/**************************************************************************************************
										product
***************************************************************************************************/
/**** product list-(s) ****/
.product .contents_top { align-items: flex-start; flex-direction: column;}
.contents_top .info_tab {display: flex; gap : 1.25rem;}
.contents_top .info_tab .tab-product { font-size: 1.35rem; font-weight: 500; color:#767676; display: flex; align-items: center;}
.contents_top .info_tab .tab-product.active {font-size: 1.75rem;  padding-bottom: 0.25rem; color:#000; font-weight: 700; background-position: 100% 100%, 0 104%; background-repeat: no-repeat;   background-image: linear-gradient(transparent, transparent),linear-gradient(#B5AEDA, #B5AEDA);  background-size: 0 0.5rem, 100% 0.5rem; }
.sub_vis { background: #846fca url('../Images/Direct/sub_vis_bg.png') no-repeat right bottom; width: 100%; min-height: 9.375rem; border-radius: 0.875rem; margin-bottom: 0.625rem;}
.sub_vis strong {color:#fff;}

.contents_info.tab {width:100%; justify-content: center; align-items: flex-start; flex-direction: column; flex-wrap: wrap; }

.contents_decryption {display: none}
.contents_decryption.active {display: flex; flex-direction: column;}

.quote .info_dec,
.contents_decryption .info_dec {background: #e9e7f1; border:1px solid #ddd; padding: 1.625rem 3rem; width: 100%; margin-bottom: 5.5rem; border-radius: var(--box-radius);}
.quote .info_dec {padding-left:2rem; padding-right: 2rem;}
.quote .info_dec strong,
.contents_decryption .info_dec strong {font-size: 1.25rem; font-weight: 600; color:#49464E;  display: inline-block;}
.quote .info_dec pre,
.contents_decryption .info_dec pre,
.info_dec .dec {font-size: 0.937rem; line-height: 188%; letter-spacing: -0.25px; color:#9389a8; white-space: pre-wrap; padding-top: 1rem; }
.info_dec .dec {line-height: 0; white-space: normal;}
.info_dec .dec p {position: relative; padding-left: 0.875rem; font-size: 0.937rem; letter-spacing: -0.25px; color:#9389a8; line-height: 188%; padding-top: 0.25rem; padding-bottom: 0.25rem;}
.info_dec .dec p::before {content: '-'; position: absolute; top:0.25rem; left:0;}

.contents_top .info_wrap {display: flex; width: 100%; justify-content: space-between;}
.product .contents_decryption .dff_tab {padding-bottom: 1.85rem;}

.product .contents_body {flex-direction: row; gap: 2rem;     align-items: flex-start; }
.serch_results {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }
.serch_results div > p {font-size: 1.25rem; color: #343434; font-weight: 500; }
.serch_results div > p > strong {color:#ff6600; font-weight: 600;}
.serch_results div > span {display: inline-block; margin-top: 0.5rem; font-size: 1rem; color:#5f5f5f;}
.serch_results .dff_search {padding: 0.625rem 1rem; border: 1px solid #ccc; border-radius: var(--btn-radius);}
.product_list_wrap {display: flex; flex-direction: column; flex:1;}
.product_list.item,
.product_list.item .list-item{display: none}
.product_list.item.active {display: block;}
.product_list.item.active .list-item{display: flex;}

.product_list li {display: flex; width: 100%;}
.product_list li div {display: flex; justify-content: center; padding: 1.35rem 1rem; flex: 1 0 auto; }
/*.product_list {border-top: 2px solid #222;}*/

.product_list li.list-head { align-items: center; font-size: 1.125rem; font-weight: 600; background: #e4e1ec; color:#9d9d9d; border-radius: var(--sm-radius); /* border-bottom: 1px solid #ccc;*/  }
.product_list li.list-head >div { padding-top: 1rem; padding-bottom: 1rem; font-size: 0.937rem;}
.product_list li .item-name { width: calc(100% - 12rem - 14%); padding-left: 1.5rem;}
.product_list li .item-price { width: 12rem; justify-content: center; align-items: center;}
.product_list li .item-select { width: 14%; justify-content: center; align-items: center; padding-right: 1.5rem;}

.product_list li.list-item { border-bottom: 1px solid #ccc; transition: .3s; display: flex;}
.product_list li.list-item.hidden {  display: none;}

.product_list li.list-item.none-item{ display: flex; padding:1.25rem 0;  align-items: center; justify-content: center; color:#343434;}

.product_list li.list-item:hover {background: var(--nomal-bg);;}
.product_list li.list-item .item-name { display: flex; justify-content: flex-start; position: relative; align-items:  flex-start; gap : 1.5rem;}
.product_list li.list-item .item-name .thum { width: 12.5rem; height: 7.5rem; position: relative; border-radius: 0.5rem; overflow: hidden; box-sizing: border-box;}
.product_list li.list-item .item-name .thum > div,
.product_list li.list-item .item-name .thum > iframe,
.product_list li.list-item .item-name .thum > video,
.product_list li.list-item .item-name .thum img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; z-index: 1; transition: 0.5s;}
.product_list li.list-item .item-name .thum::after {content: ""; width: 100%; height: 100%; background: var(--color-inno-blue); position: absolute; top:0; left:0; opacity: 0.1; z-index: 2; transition: 0.3s;}
.product_list li.list-item .item-name:hover .thum::after {opacity: 0;}
.product_list li.list-item .item-name:hover strong { color: var(--color-purple);}
.product_list li.list-item .item-name:hover .thum img {transform: scale(1.1);}

.product_list li.list-item .item-name strong {width: calc(100% - 12.3rem - 1rem); display: block; font-weight: 500; color:#454545; font-size: 1.15rem; line-height: 1.6rem; position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;  } 
.product_list li.list-item .item-name strong > span {display: block; font-size: 1rem; color:var(--color-gray2); margin-top:0.5rem;}


.product_list li.list-item .item-name > button,
.product_list li.list-item .item-name > a {position: absolute; top:0; left:0; width: 100%; height: 100%; color:transparent; opacity: 0; z-index: 10; }
.product_list li.list-item .item-price {font-size: 1.15rem; font-weight: 500; color: var(--color-purple);}
.product_list li.list-item .item-select button {border:1px solid #aaa; display: flex; width: 100%; height: 3rem; font-weight: 500; justify-content: center;align-items: center; border-radius: 0.25rem; transition: 0.3s; }
.product_list li.list-item .item-select button:hover {border:1px solid var(--color-purple); color: var(--color-purple); background: var(--body-bg);}
.product_list li.list-item .item-select button.has {background:var(--color-purple); border-color: var(--color-purple);  color:var(--color-wihite); font-weight: 500;}
/**** product list-(e) ****/

/**** 과정선택영역 -(s) ****/
#basket .basket_tit {position: relative;  background: #e4e1ec; border-radius: var(--sm-radius);  /*border-top: 2px solid var(--color-black);*/}
#basket .basket_tit > button {position: absolute; right: 1rem; top: 50% ; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; border: 1px solid #aaa; width: 1.5rem; height: 1.5rem; border-radius: 0.25rem; transition: 0.3s; background: #fff;}
#basket .basket_tit > button:hover {background: var(--color-purple); color:#fff;}
#basket .basket_tit > button i{font-size: 0.812rem; position: relative;}
#basket .basket_tit strong { padding-top: 1rem; font-weight: 600; padding-bottom: 1rem; color:#9d9d9d; font-size: 0.937rem;}
#basket ul {overflow-y: auto; max-height: calc(100vh - 25rem); min-height: 12rem; margin-top: 0.875rem;}
#basket ul::-webkit-scrollbar { width: 3px; }
#basket ul::-webkit-scrollbar-thumb { background-color: var(--color-purple); }
#basket ul::-webkit-scrollbar-track {  background-color: #f1f1f1; }

#basket ul li { display: flex; flex-direction: column;  width: 100%; background: #fefefe; margin: 0.5rem 0; position: relative; box-shadow: 2px 2px 4px #b1b1b14f}
#basket ul li.item .item_info  {padding: 1.25rem; border-radius: var(--btn-radius); border:1px solid #ddd;}
#basket ul li.item .item_info > strong { display: block; font-weight: 500; color:var(--color-purple); font-size: 1rem; line-height: 1.35rem; position: relative; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: calc(100% - 2rem);}
#basket ul li.item .item_info > div {display: flex; flex-direction: row; justify-content: space-between; padding-top: 1rem; align-items: center;}
#basket ul li.item > .item_fee {display: flex; flex-direction: row; justify-content: space-between; padding: 0.85rem 1.25rem; align-items: center; border-top: 2px solid #efefef;}
#basket ul li.item > .item_fee strong {font-weight: 500; color:#000;}
.totalitemFee {font-weight: 500; color:#ff6600; }
.totalitemFee::after {content: '원'; padding-left: 3px; color:var(--color-black)}

#basket ul li.item > .item_fee span ,
#basket ul li.item .item_info div span { font-size: 0.875rem; font-weight: 500; color:#787878;}


.personnel_btn  {display: flex; }
.personnel_btn button  {display: flex; background: #f1f1f1; border: 1px solid #ccc; justify-content: center; align-items: center; width: 1.85rem; height: 2rem; }
.personnel_btn button:first-child {border-right: 0;}
.personnel_btn button:last-child {border-left: 0;}
.personnel_btn button i { font-size: 12px; color:#787878; transition: 0.3s; position: relative; top: 1px;}
.personnel_btn button:hover i {color:#000; }
.personnel_btn input[type="number"] {width: 3.4rem; height: 2rem; border:1px solid #ccc; background: #fff; text-align: center; font-size: 14px; color: var(--color-black);}
.personnel_btn input[type="number"]::-webkit-outer-spin-button,
.personnel_btn input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.itemDel { position: absolute; top:1.25rem; right: 1.25rem;}
.itemDel i {color:#bea7fc; padding: 0.25rem; transition: 0.4s;}
.itemDel:hover i { color:#7163ba; }

.basket-action {padding: 0.85rem;}
.basket-action div:first-of-type { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; padding-bottom: 1rem;}
.basket-action div:first-of-type span:first-of-type {font-size: 1.15rem; color:var(--color-black);}
.basket-action div:first-of-type span:last-of-type {font-size: 1.15rem; color:var(--color-black); font-weight: 500; }
.basket-action div:first-of-type span strong {color:#ff6600; font-weight: 600; font-size: 1.5rem; margin-right: 0.25rem;}
.basket-action div:last-of-type .basketSubmit { display: flex; justify-content: center; align-items: center; width: 100%; height: 3.5rem; background: #ffbf19; color:var(--color-black); font-size: 1.25rem; border-radius: var(--btn-radius); font-weight: 600;}
.basket-action div:last-of-type .goChance { display: flex; justify-content: center; align-items: center; width: 100%; height: 3.5rem; background: var(--color-inno-blue); color: #fff; font-size: 1.25rem; border-radius: var(--btn-radius); font-weight: 300; margin-top: 5px;}

/**** 과정선택영역 -(e) ****/

@media (max-width:1280px) { 
	.info_wrap {flex-direction: column;}
	.info_wrap .dff_search {margin-top: 2rem; margin-bottom: 1rem;}
	.serch_results .dff_search {width: 18rem; padding: 0.85rem 1rem;}
	.serch_results .dff_search input {font-size: 1rem;}
	.product .contents_body {gap: 1.25rem;}
	.quote .info_dec,
	.contents_decryption .info_dec {padding:1.625rem; }
	.contents_decryption .info_dec {margin-bottom: 2rem;}
	.serch_results .dff_search,
	.contents_body #basket, 
	.contents_body #basket.fixed .basket_wrap {width: 17rem;}
	.contents_body #basket ul {padding:0;}
	
	.product_list li .item-name { padding-left: 1rem; width: calc(100% - 8rem - 7.5rem);}
	.product_list li.list-item .item-name strong {font-size: 1rem;  width: calc(100% - 10rem); line-height: 140%;padding-right: 1rem} 
	.product_list li.list-item .item-name .thum{width: 10rem; height: 6rem;}
	.product_list li .item-price{ width: 8rem;}
	.product_list li .item-select { padding-right: 1rem; width: 7.5rem;}
	

}
@media (min-width:991px) {
	.mobile_basket,
	#mobileBasket,
	.basketClose {display: none;}
	
	.tooltip .tooltip-text { visibility: hidden; width: 8rem; background-color: var(--color-inno-blue); color: #fff; text-align: center;  border-radius: 0.4rem; padding: 0.65rem 0; position: absolute;  z-index: 2; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%); opacity: 0.9; }
	.tooltip:hover .tooltip-text { visibility: visible; }
	
	#basket { width: 20rem;  position: sticky; top: 0;  top: 8.178rem; }
	.basket_wrap { display: flex; flex-direction: column; justify-content: space-between; }
	
	/*
	#basket.fixed .basket_wrap { width: 20rem; position: fixed; height: 100%; max-height: calc(100vh - 7.178rem - 1.5rem - 2rem);}	
	#basket.fixed.bottom_fixed .basket_wrap { max-height: calc(100vh - 7.178rem - 18.5rem - 1rem); }	
	#basket.fixed.bottom_fixed .basket-item {max-height: calc(100vh - 7.178rem - 32.9rem ); }
	#basket.fixed .basket-item {max-height: calc(100vh - 7.178rem - 14rem -1rem );  }
	*/
	.basket_wrap .basket_tit {padding: 1rem 1rem; text-align: center; position: relative;}	
	.product_list li.list-item .item-select button::after {content: "과정선택" ; }
	.product_list li.list-item .item-select button.has::after {content: "선택완료"}
	
}

@media (max-width:990px) { 
	body.basket_on {overflow: hidden;}	
	
	.contents_top .info_tab {gap : 1rem;}
	.contents_top .info_tab .tab-product {font-size: 1.125rem;  }
	.contents_top .info_tab .tab-product.active {font-size: 1.35rem;  }
	
	.quote .info_dec, 
	.contents_decryption .info_dec,
	.form_container {border-radius: var(--sm-radius)}
	.serch_results {flex-direction: column; width: 100%; justify-content: center; align-items: flex-start; gap: 0.85rem; margin-bottom: 0;}
	.serch_results div { width: 100%; display: flex; flex-direction: row; gap:0.8rem;}
	.serch_results div.dff_search form, 
	.serch_results div.dff_search{ width: 100%; max-width: 100%; justify-content: space-between; display: flex;}
	.product_list li.list-head,
	#basket {display: none;}
	.basket_on .basket-action > div.row:last-of-type .goChance {display: none;}
	.basket_on #basket {position: fixed; display: flex; z-index: 99999; top:0; left:0; width: 100%; height: 100%; background: #fff;}
	.product_list li.list-item .item-select button::after {content: "선택" ; }
	.product_list li.list-item .item-select button.has::after {content: "완료"}	
	
	.mobile_basket { position: fixed; left:0; bottom:0; width: 100%;  z-index: 90; display: flex; justify-content: space-between; padding: 0 var(--sm-padding);}
	.mobile_basket button {width: calc(50% - 2px); display: flex; justify-content: center; align-items: center; padding: 1.25rem 0; font-size: 1.25rem; border-radius: var(--btn-radius);}
	.mobile_basket button.goChance {background: var(--color-inno-blue); color: #fff;  font-weight: 400; }
	.mobile_basket button#mobileBasket {background: #ffbf19; color: var(--color-black);  font-weight: 600; }
	
/*	.mobile_basket #mobileBasket {width: 100%; display: flex; justify-content: center; align-items: center; padding: 1.25rem 0; font-size: 1.25rem; font-weight: 600;  background: #ffbf19; color: var(--color-black);  }*/
	
	.mobile_basket.bottom_flex {position: relative; padding: 1rem 0 0 0; } 
	.basket-action {position: fixed; bottom:0; left:0; padding: var(--sm-padding); width: 100%;}	
	.basket-action > div { display: flex; justify-content: space-between; align-items: center; z-index: 99999;}
	.basket-action > div.row:last-of-type button { display: flex; justify-content: center; align-items: center; gap:5px; height: 4.5rem; border-radius: 0.25rem;}
	.basket-action > div.row:last-of-type .basketClose {background: #d1d1d1; color:#787878; width: 22%; }
	.basket-action > div.row:last-of-type .basketSubmit {width: calc(78% - 5px);}
	
	#basket {padding: var(--sm-padding); max-width: 100vw;}
	#basket .basket_wrap{display: flex; flex-direction: column; width: 100%;}	
	#basket .basket_tit {background: none; border-top: none; padding: 0.65rem 0 1rem 0; display: flex; justify-content: space-between; align-items: center; }
	#basket .basket_tit > button { position: relative; top:0; right: 0; transform: translateY(0); width: auto; height:  auto; padding: 0.65rem 1rem; font-size: 0.875rem;}
	#basket .basket_tit > button i {margin-right: 0.5rem; font-size: 0.875rem; }
	#basket .basket_tit strong {font-size: 1.35rem; color: var(--color-black);}
	#basket ul {max-height: calc(100vh - 15rem)}
	#basket ul li.item .item_info > strong {min-height: 2.75rem; font-weight: 600; }
	
	.basket-action div:first-of-type {padding-bottom: 1.25rem;}
	.basket-action > div.row:last-of-type button {height: auto; padding: 1rem 0 ; font-size: 1.125rem;}
	
	.product .contents_decryption .info_dec strong { position: relative; width: 100%;}
	.product .contents_decryption .info_dec strong::after {content: '\f0dd';font: var(--fa-font-solid); display: flex; justify-content: center; align-items: flex-start;  position: absolute; top: 0; right: 0; color: var(--color-purple);
    transform: rotate(0) translateY(-4px); transition: 0.4s;}	
	.product .contents_decryption .info_dec .dec {overflow: hidden; height: 0; padding-top: 0; transition: 0.4s;}
	.product .contents_decryption .info_dec strong {transition: 0.4s; margin-bottom: 0; color: var(--color-purple);}
	.product .contents_decryption .info_dec strong.on {padding-bottom: 1rem;}
	.product .contents_decryption .info_dec strong.on::after { transform: rotate(180deg) translateY(-4px);}	
}

@media (max-width: 645px) { 
	.quote .info_dec,
	.contents_decryption .info_dec {padding: 1.25rem;}
	.quote .info_dec strong,
	.contents_decryption .info_dec strong {font-size: 1.125rem; font-weight: 600;  display: inline-block; line-height: 135%;}
	.quote .info_dec pre,
	.contents_decryption .info_dec pre,
	.info_dec .dec p {font-size: 1rem;  white-space: pre-wrap; font-weight: 400; }
	.info_dec .dec p { line-height: 188%; padding-top: 0.25rem; padding-bottom: 0.25rem; white-space: normal;}
	.info_dec .dec p::before {top: 0.5rem;}
	.contents_top .info_tab .tab_product {font-size: 1rem;}
	.contents_top .info_tab .tab_product.active {font-size: 1.25rem; background-size: 0 0.35rem, 100% 0.35rem;}
	.serch_results {margin-bottom: 0.65rem;}
	.serch_results div,
	.serch_results div > span {display: none;}
	.product_list {border-top: 0;}

	.product_list li.list-item {flex-wrap: wrap; position: relative; border: 1px solid #ccc; margin-bottom: 1rem; border-radius: 0.5rem;}	
	.product_list li.list-item:hover {background: none;}
	.product_list li.list-item .item-name { justify-content: flex-start; align-items: flex-start; gap: 1rem; width: 100%;}
	.product_list li .item-select {width: 100%; padding: 0 1rem 1rem 1rem;}
	.product_list li.list-item .item-name .thum {width: 11rem; height: 6.6rem ;}	
	.product_list li.list-item .item-name strong { font-size: 1rem; margin-bottom:  2.25rem; width: calc(100% - 11rem);}
	.product_list li.list-item .item-price {display: inline-block; position: absolute; bottom: 4.9rem; left: 12rem; font-size: 1rem;  width: calc(100% - 11rem);}	
	.product_list li.list-item .item-name strong > span {margin-top: 0; font-size: 0.875rem;}
	.basket-action div:first-of-type span:first-of-type {font-size: 1rem; font-weight: 600; }
	.product_list li.list-item .item-select button::after {content: "과정선택" ; }
	.product_list li.list-item .item-select button.has::after {content: "선택완료"}
	
	.product .contents_decryption .dff_tab {padding-bottom: 1.125rem;}
}

@media (max-width: 450px) { 
	
	.product_list li.list-item {border-radius: var(--btn-radius); margin-bottom: 0.5rem; }
	.product_list li.list-item .item-name { width: 100%; gap: 0.65rem; padding: 0.65rem; }
	.product_list li.list-item .item-name .thum { width: 8rem; height:5.5rem; }
	.product_list li .item-select {width: 100%; padding: 0 1rem 1rem 1rem;}
	.product_list li.list-item .item-name strong { width: calc(100% - 8rem); margin-bottom: 1.5rem; font-size: 1rem;}
	.product_list li.list-item .item-price { left: 8.3rem; bottom:2.5rem; width: calc(100% - 8rem); font-size: 1rem;}
	.product_list li.list-item .item-select {padding: 0 0.65rem 0.65rem  0.65rem;}
	.product_list li.list-item .item-select button {height: auto; padding: 0.65rem 0;}
	.mobile_basket.bottom_flex button {font-size: 1rem; height: auto; padding: 1.15rem 0; }
}


/**** 과정상세(모달) -(s) ****/

.product_view_top {display: flex;}
.product_view_top .cs_thum {display: block; overflow: hidden; border-radius: 0.5rem;  width: 50%; padding-bottom: 30%; position: relative;}
.product_view_top .cs_thum::before { content: ""; background: #000; width: 100%; height: 100%; position: absolute; top:0; left:0; z-index: 2; opacity: .4; transition: 0.5s;}
.product_view_top .cs_thum::after {  content: "\f144";   font-family: 'Font Awesome 5 Free'; font-weight: 900;  position: absolute; display: flex; width: 100%; height: 100%; top:0 ; left:0; z-index: 3; color:#fff; justify-content: center; align-items: center; font-size: 4rem; opacity: .7; transition: 0.5s;}
.product_view_top strong.cs_thum::before,
.product_view_top strong.cs_thum::after,
.product_view_top .samplePlayer.cs_thum::before,
.product_view_top .samplePlayer.cs_thum::after {display: none;}
.product_view_top .samplePlayer .vjs-big-play-button {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)}
.product_view_top .cs_thum > div,
.product_view_top .cs_thum > iframe,
.product_view_top .cs_thum > video,
.product_view_top .cs_thum img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0;  z-index: 1; transition: 0.5s;}
.product_view_top .cs_thum:hover::before,
.product_view_top .cs_thum:hover::after {opacity: 0;}
.product_view_top .cs_thum:hover img {transform: scale(1.1);}
.product_view_top strong.cs_thum:hover img{transform: scale(1);}

.product_view_top .product_view_info  {display: flex; flex-direction: column; padding-top: 1rem; flex: 1 1; position: relative; }
.product_view_top .product_view_info > div {display: flex; flex-direction: column;}
.product_view_top .product_view_info span.cs_type {font-size: 1em; font-weight: 600;  color:var(--color-purple); margin-bottom: 0.5rem;}
.product_view_top .product_view_info span.cs_type span:last-of-type::before {content: "/"; padding: 0 4px 0 0 ;}
.product_view_top .product_view_info h3 {font-size: 1.5rem; font-weight: 600; color:#232323; line-height: 135%;}
.product_view_top .product_view_info span.fee {font-size: 1.25rem; font-weight: 500; padding: 0.5rem 0; }
.product_view_top .product_view_info span.fee strong {font-size: 1.68rem; font-weight: 800; color: var(--color-purple); margin-right: 0.25rem;}
.product_view_top .product_view_info .product_view_dec {display: flex; width: 100%; border:1px solid #ddd; background: #F6F6F8; align-items: center; padding: 1.2rem 0rem ;  border-radius: 0.5rem; margin: 1rem 0 0.5rem 0; }
.product_view_top .product_view_info .product_view_dec > span {flex: 1 1; position: relative; display: flex; justify-content: center; align-items: center; font-weight: 500; color:#7163ba;}
.product_view_top .product_view_info .product_view_dec > span:first-of-type::before {display: none;}
.product_view_top .product_view_info .product_view_dec > span::before {content: "I"; position:absolute; top:50%; left:0; transform: translateY(-50%); font-weight: 200; color:#ccc;}
.product_view_top .product_view_info .product_view_dec span > i {  padding-right: 0.5rem; position: relative; top: -1px;}
.product_view_top .product_view_info .product_view_dec span.cs_device > span:first-of-type::before {display: none;}
.product_view_top .product_view_info .product_view_dec span.cs_device > span::before {content: "+"; padding: 0.25rem; }

.product_view_info .itemSelectBtn {border:1px solid #aaa; display: flex; font-weight: 600; justify-content: center;align-items: center; border-radius: var(--btn-radius); transition: 0.3s; padding: 1rem 3rem; width: 100%;}
.product_view_info .itemSelectBtn:hover {background:var(--color-purple); border:1px solid var(--color-purple); color:#fff;}
.product_view_info .itemSelectBtn.has {background:var(--color-purple); border-color: var(--color-purple);  color:var(--color-wihite); font-weight: 500;}
.product_view_info .itemSelectBtn::before {content: "과정선택"}
.product_view_info .itemSelectBtn.has::before {content: "선택완료"}

.product_view_mid .table-wrap { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 2.85rem; margin-top: 1rem;}
.product_view_mid .table-wrap > div { display: flex; align-items: center; justify-content: center;}
.product_view_mid .table-wrap > div.th {border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background:#ebeaf0; font-weight: 600; }
.product_view_mid .table-wrap > div.th.r_th {border-top:0;}
.product_view_mid .table-wrap > div {border-bottom: 1px solid #ccc;}

.product_view_mid .table-wrap > div.essen {color:#ff6600;}
.product_view_mid .table-wrap > div.unnecessary {color: var(--color-gray2);}
.product_view_mid .table-wrap .col_span {grid-row: span 2;}


.product_view_tab {width: 100%; display: flex; padding: 2rem 0 0.5rem 0; gap:0.25rem; }
.product_view_tab button {padding: 0.85rem 1.5rem; border: 1px solid #ccc; color:#232323; font-weight: 500; font-size: 0.937rem; border-radius: 100rem;}
.product_view_tab button.active {background: var(--color-purple); color: var(--color-wihite); border:1px solid var(--color-purple); }
.product_view_tab_con > div > pre {border:1px solid #ccc; background:var(--nomal-bg); width: 100%; padding: 1rem; color: #706e74; line-height: 160%; border-radius: var(--sm-radius);}

@media (min-width:991px) {	

	.product_view_top .product_view_info  {max-width: 50%; padding-left: 1.25rem; flex: 1 1; justify-content: space-between; }
	.product_view_top .product_view_info .product_view_dec { justify-content: space-between;}
}
@media (max-width:990px) {	
	.product_view_top {position: relative; padding-bottom: 8rem; }
	.product_view_top .cs_thum {width:22em; padding-bottom: 0; height: 13.2rem; }
	.product_view_top .product_view_info {max-width: calc(100% - 22rem); padding-left: 1.25rem; position: unset;}
	.product_view_top .product_view_info .product_view_dec {border-radius: var(--btn-radius)}
	.product_view_info > div:nth-of-type(2) {position: absolute; left:0; bottom:0; width: 100%;}
}

@media (max-width:710px) {	
	.product_view_top {padding-bottom: 7rem;}
	.product_view_top .cs_thum {width:15em; height: 9rem; }
	.product_view_top .product_view_info {max-width: calc(100% - 15rem); padding-left: 1.25rem; padding-top: 0.5rem;}
	.product_view_top .product_view_info h3 {font-size: 1.25rem;}
	.product_view_top .product_view_info .product_view_dec {padding: 1rem 0;}
	.selCompletBtn {padding: 0.85rem 0;}
	.product_view_mid .table-wrap {font-size: 0.875rem;}
}


@media (max-width:660px) {	
	.product_view .modal-content .modal_body {padding:0;}
	.product_view_top {flex-direction: column; padding-bottom: 0;}
	.product_view_top .cs_thum {width: 100%; height: auto; padding-bottom: 20rem; border-radius: 0;}
	.product_view_top .cs_thum::before {opacity: 0.2;}
	.product_view_top .product_view_info { max-width: 100%; padding: 1rem;}
	.product_view_top .product_view_info  > div:nth-of-type(2) {position: relative; width: 100%;}
	.product_view_top .product_view_info h3 {font-size: 1.15rem;}
	.product_view_top .product_view_info span.cs_type {font-size: 0.875rem;}
	.product_view_top .product_view_info span.fee {font-size: 1rem;}
	.product_view_top .product_view_info span.fee strong {font-size: 1.15rem;}
	.product_view_top .product_view_info .product_view_dec span {font-size: 0.875rem;}
	.product_view_top .product_view_info .product_view_dec span > i {display: none;}
	
	.product_view_mid { padding: 0 1rem; }	
	.product_view_mid .table-wrap { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 2.85rem; margin-top:0; }
	.product_view_mid .table-wrap > div.th {border-top: 0;}
	.product_view_mid .table-wrap > div:first-of-type,
	.product_view_mid .table-wrap > div.th.r_th {border-top: 1px solid #ccc;}
	.product_view_mid .table-wrap > div:first-of-type {order:-9;}
	.product_view_mid .table-wrap > div.th.r_th {order: -1;}	
	.product_view_mid .table-wrap > div:nth-of-type(2){order:1;}
	.product_view_mid .table-wrap > div:nth-of-type(8){order:2;}
	.product_view_mid .table-wrap > div:nth-of-type(14){order:3;}	
	
	.product_view_mid .table-wrap > div:nth-of-type(3){order:4;}
	.product_view_mid .table-wrap > div:nth-of-type(9){order:5;}
	.product_view_mid .table-wrap > div:nth-of-type(15){order:6;}
	
	.product_view_mid .table-wrap > div:nth-of-type(4){order:7;}
	.product_view_mid .table-wrap > div:nth-of-type(10){order:8;}
	.product_view_mid .table-wrap > div:nth-of-type(16){order:9;}
	
	.product_view_mid .table-wrap > div:nth-of-type(5){order:10;}
	.product_view_mid .table-wrap > div:nth-of-type(11){order:11;}	
	.product_view_mid .table-wrap > div:nth-of-type(17){order:12;}
	
	.product_view_mid .table-wrap > div:nth-of-type(6){order:13;}	
	.product_view_mid .table-wrap .col_span,
	.product_view_mid .table-wrap > div:nth-of-type(18){order:14; grid-row: auto; grid-column: span 2; }
	
	.product_view_tab {padding: 2rem 1rem 0.5rem 1rem; display: flex;  justify-content: flex-start; flex: 1; gap:1.6rem;}
	.product_view_tab button { padding: 0.85rem 0; display: flex; justify-content: flex-start; align-items: center; border-right: 0; font-size: 0.875rem; border-radius: 0; border:0; color:#787878; flex:0 0 auto; font-size: 1rem;}
	.product_view_tab button.active { border: 0; color:#000; font-weight: 800; background-position: 100% 100%, 0 70%;
    background-repeat: no-repeat; background-color: transparent; background-image: linear-gradient(transparent, transparent), linear-gradient(#B5AEDA, #B5AEDA); background-size: 0 0.25rem, 100% 0.25rem;}
	
	.product_view_tab button:last-of-type {border-right: 0;}
	.product_view_tab_con {padding:0 1rem 1.25rem 1rem;}
	.product_view_tab_con > div > pre {font-size: 1rem; line-height: 156%; border-radius: var(--btn-radius)}
	.modla_footer {padding:0; }
	.modla_footer button { max-width: 100%; border-radius: 0; border:0; background: var(--color-purple); color:#fff; border-radius: 0 0 var(--btn-radius) var(--btn-radius);  }
}



@media (max-width:450px) {		
	.product_view_top .cs_thum {padding-bottom: 13rem; }
}
/**** 과정상세(모달) -(s) ****/