#container{display: flex; flex-direction: column; min-height: 100vh;}
.sub_con{flex-grow: 1; margin:100px 0; margin-top:170px;}
.sub_con .in{max-width:1200px;}
/* .sub_in {margin:150px 0 0 0; width:100%; display:inline-block; font-size:16px; font-weight:300; color:#333} */
 
hr.sub_hr {height:100px}

hr.sub_hr2 {height:40px}
h3.guide {font-size:1.7em; width:100%; text-align:center; margin-bottom:30px;  font-weight:700; display:inline-block   }
h3.guide2 {font-size:1.3em; font-weight:700;  width:100%; margin-bottom:15px;  display:flex; align-items:flex-end}
h3.guide2 a {font-size:14px; font-weight:400; margin-left:auto ; }

 
h4.tit {font-size:1.25em; margin-bottom:15px; font-weight:600}
h4.tit.flex  {align-items:center}
h4.tit.flex a {margin-left:auto; font-size:14.3px; font-weight:400; background-color: var(--main_c); color:#fff; display:inline-block; padding:4px 10px}



section.sub_vi {color:var(--main_c);  padding-bottom:30px; /* background:url('/common/img/21230314.jpg') no-repeat bottom; background-size:cover; background:#ddd !important;  */text-align:center;}
.sub_vi .in {max-width:1700px}
.sub_vi h3 {width:100%; font-size:2.5em; font-weight:700;  color: var(--main_c);}


@media screen and (max-width:900px){
		.sub_con {font-size:15px; margin-top:120px;}
		section.sub_vi {padding-bottom:20px;}
		.sub_vi h3 {font-size:2em  }
		.mypage section.sub_vi {margin-bottom:0px}
		h3.guide {font-size:1.5em; }
 
 }



 


/**/

.right_con {
    width: calc(100% - 240px);
    margin-left: auto;
}


.list aside {width:200px; margin-right:40px; flex-shrink:0}
.list aside ul {width:100%}
.list aside ul li {margin-bottom:10px; font-size:1.1em}
.list aside ul li:last-child {margin-bottom:0}
.list aside ul li ul {margin:15px 0; background-color:#fff; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:20px 0; box-sizing:border-box}
.list aside ul li a {color:var(--g_color); }
.list aside ul li a:hover {color:var(--main_c); font-weight:600 }
.list aside ul li.ov > a {color:var(--main_c); font-weight:600}
.list aside ul li ul li {margin-bottom:5px; display:flex; font-size:.97rem;  }
.list aside ul li ul li:before {content:'-'; margin-right:3px}
.list aside ul li ul li a {color:#666; font-size:1em}
.list aside ul li ul li a:hover {text-decoration:underline; font-weight:400}
.list aside ul li ul li.ov > a {  font-weight:400}
.list aside.none {display:none}

.list_cate ul {display:flex; flex-wrap:wrap; border:1px solid #ddd; box-sizing:border-box; padding:10px 15px; margin-bottom:15px}
.list_cate ul li { margin:5px 20px 5px 0}
.list_cate ul li a {color:#555}
.list_cate ul li.ov a {font-weight:600; color:#111}



@media screen and (max-width:900px){
		 .sub_in {font-size:15px; overflow-x:hidden; }
 

}


.name_label{ display:flex; gap:0 12px; flex-wrap:wrap;}
.name_label span{
  padding:5px 13px;
  box-sizing:border-box;
  border-radius:999px;
  font-size:12px;
  letter-spacing:-.2px;
  color:#fff;
  white-space:nowrap;
  margin-bottom:10px;
  box-shadow:
    0 6px 3px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:saturate(140%) blur(2px);
}

/* NEW : 민트/청록 (신규 느낌) */
.name_label .t-new{
  background:linear-gradient(135deg,#00D1B2 0%, #06B6D4 100%);
  box-shadow:
    0 6px 16px rgba(0,0,0,.12),
    0 0 0 4px rgba(6,182,212,.12);
}

/* BEST : 골드 (인기/추천 느낌) */
.name_label .t-best{
  background:linear-gradient(135deg,#F59E0B 0%, #F97316 100%);
  box-shadow:
    0 6px 16px rgba(0,0,0,.12),
    0 0 0 4px rgba(245,158,11,.14);
}

/* 얼리버드 : 퍼플/핑크 (혜택/프로모션 느낌) */
.name_label .t-early{
  background:linear-gradient(135deg,#8B5CF6 0%, #EC4899 100%);
  box-shadow:
    0 6px 16px rgba(0,0,0,.12),
    0 0 0 4px rgba(139,92,246,.14);
}

/* 마감임박 : 레드 (긴급/주의 느낌) */
.name_label .t-deadline{
  background:linear-gradient(135deg,#EF4444 0%, #DC2626 100%);
  box-shadow:
    0 6px 16px rgba(0,0,0,.12),
    0 0 0 4px rgba(239,68,68,.14);
}

@media screen and (max-width:900px){
	.name_label span{font-size:.7em; padding:3px 9px;}
}

.sub_con .course{background:none; padding:0; font-size: 1.1em;}
.sub_con .course ul{flex-wrap:wrap;}
.sub_con .course li{box-sizing:border-box; box-shadow:none; width: calc(33.33% - 14px);}
/* .sub_con .course li .imgbox{height:11.5vw; overflow:hidden;} */

.sub_con .view {display:flex; align-items:start; flex-direction: row-reverse; gap:50px; }
.product_view_top  { width:38%; position:sticky; top:170px; border:1px solid #ddd; padding:25px; box-sizing:border-box;} 
.product_view_btm{width:62%;}
.product_view_top .in  {display:flex; align-items:start;}
.product_view_top .img {width:55%;  display:flex; align-items:start;}
.product_view_top .img  img {width:calc(100% - 70px);  box-sizing:border-box; /* border:1px solid #ddd;  */ }
.product_view_top .img ul { width:70px; flex-shrink:0; margin-left:-1px;}
.product_view_top .img ul li { line-height:0;  text-align:center; width:100%}
.product_view_top .img ul li img {b/* order:1px solid #ddd;  */box-sizing:border-box; width:100%}

.product_view_top .info {width:100%;}
.product_view_top h4 {font-size:1.6em; font-weight:700;   }
.product_view_top .pay {margin:20px 0; font-weight:700; color:var(--main_c); display:flex; justify-content:space-between; text-align:right; flex-wrap:wrap;}
.product_view_top .pay .wrap{ font-size:1.5em; display:flex; gap:10px; align-items:center; color:var(--main_c)}
.product_view_top .pay .before {    text-decoration: line-through; font-weight:300; color:#555; font-size:.8em;}
.percent{color:var(--main_c); font-size:1.3em; font-style:italic;}

.product_view_top .info  ul {width:100%}
.product_view_top .info  ul li {border-bottom:1px solid #ddd; padding:10px 0; display:flex; align-items:center}
.product_view_top .info  ul li b {width:100px; flex-shrink:0; font-weight:500;}
.product_view_top .info  ul li select {height:38px; width:100%; box-sizing:border-box; color:#333; border:1px solid #ddd; }

.product_view_info *{font-family: inherit; color:inherit; font-weight:revert;}


.monthly{background:#f9f9f9; padding:15px; box-sizing:border-box; margin-bottom:10px; text-align:center;}
.monthly b{font-size:1.3em; display:inline-block; margin-bottom:5px;}

@media screen and (min-width:900px){
	.product_view_top .img ul li img {border-bottom:none}
	.product_view_top .img ul li:last-child img {border-bottom:1px solid #ddd}

}

@media screen and (max-width:900px){
		.sub_con .course ul{gap:10px;}
		.sub_con .course li{width:calc(50% - 5px);}
		.product_view_top .in  {flex-wrap:wrap }
		.product_view_top .info {width:100%; }
		.product_view_top .img {width:100%; flex-wrap:wrap}
		.product_view_top .img  img {width:100%;}
		.product_view_top .img ul {width:100%; display:flex; margin-top:-1px }
		.product_view_top .img ul li {width:16.6666%; }
		.product_view_top .img ul li img {border-right:none}
		.product_view_top .img ul li:last-child img {border-right:1px solid #ddd}
		.product_view_top h4 {font-size:1.3em; margin-top:20px}


}

/* 모바일에서: btm의 img -> top -> btm의 나머지 */
@media (max-width: 1024px){

  /* 세로 스택 */
  .sub_con .view{
    display:flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }

  /* sticky 해제 */
  .product_view_top{
    position: static;
    top: auto;
    width: 100%;
  }

  /* btm 컨테이너를 '투명화'해서 자식들이 view의 직접 자식처럼 되게 함 */
  .product_view_btm{
    display: contents;
  }

  /* 1) btm의 첫 번째 .in (지금 구조상 이미지 들어있는 .in) */
  .product_view_btm .img{
    order: 1 !important;
    width: 100%;
  }

  /* 2) top을 그 다음에 */
  .product_view_top{
    order: 2;
  }

  /* 3) btm의 나머지(탭/후기/환불규정 등) */
  .product_view_btm > *:not(.in:first-child){
    order: 3;
    width: 100%;
  }
}


.cart_btn {width:100%; display:flex; justify-content:center; margin-top:20px; gap:20px;}
.cart_btn a  {width:35%; line-height:50px;  background-color:var(--main_c);  color:#fff; font-size:1.1em;  font-weight:400; text-align:center; display:inline-block; transition: background-color 0.1s ease-in; cursor:pointer;   white-space:nowrap;}
.cart_btn span  {width:25%; border-radius:3px;  line-height:50px;  border:1px solid var(--main_c); box-sizing:border-box;  color:var(--main_c); font-size:1.1em;  font-weight:400; text-align:center; display:inline-block; transition: background-color 0.1s ease-in; cursor:pointer; white-space:nowrap;}
.cart_btn a:nth-child(1) {border:1px solid var(--main_c); box-sizing:border-box;  background:#fff; color:var(--main_c)}
.cart_btn a i{color:#fff}
.cart_btn a:nth-child(1) i {color:var(--main_c);}
.cart_btn span.over {background-color:var(--main_c); color:#fff}
.cart_btn span b {font-weight:400}

.cart_btn2 {width:100%;  margin-top:20px}
.cart_btn2 span  {width:100%; line-height:50px;  background-color:#333;   color:#fff; font-size:1.1em;  font-weight:400; text-align:center; display:inline-block; transition: background-color 0.1s ease-in; cursor:pointer;   white-space:nowrap;}

@media screen and (max-width:900px){
	    .cart_btn {gap:10px}
		.cart_btn span   {width:50px;  }
		.cart_btn a   {width:50%}
 


}


.option_plus {width:100%; background-color:#f3f3f3;  margin-top:-1px; box-sizing:border-box;   padding:17px; font-size:1.05em ; color:#555;}
.option_plus *{color:#555}
.option_plus div.flex_in { width:100%; display:flex; align-items:center; margin-top:5px; justify-content:end;}
.option_plus div.flex_in p:last-child {  white-space:nowrap; }
.option_plus  div.flex_in a {font-weight:300; font-size:1em;  width:auto; padding:0; margin:0; color:#777; line-height:1}

.number {border:1px solid #ddd; margin-left:auto; margin-right:10px; width:100px; flex-shrink:0; display:flex;  } 
.number span {width:30px; flex-shrink:0;  background-color:#f1f1f1; font-size:12px; text-align:center; line-height:30px; cursor:pointer}
.number p {width:100%;  text-align:Center; line-height:30px; height:30px; float:left; font-size:15px; background-color:#fff}


.tab {display:flex; width:100%; position:relative; margin-bottom:20px;   background-color:#f0f0f0;   }
.tab:after {content:''; width:100%; height:1px; background-color:var(--main_c); position:absolute; bottom:0px; left:0}
.tab li {width:50%; font-size:1.1em; text-align:center; line-height:35px; padding:5px 20px; position:relative; z-index:99; cursor:pointer}
.tab li a {width:100%; display:inline-block}
.tab li.on {background-color:var(--main_c); font-weight:400; color:#fff}
.tab li a {color:#222}
.tab li.on a {color:#fff}


#product_review dl {width:100%; border-top:1px solid #ddd; margin-bottom:-1px;}
 
#product_review dt {
  background-color: #fff;
  border-bottom:1px solid #ddd;
  cursor: pointer;
  font-size:1em; 
  transition: 0.7s; align-items:center; gap:10px; 
  color: #333; width:100%; display:flex;  padding:15px 10px; box-sizing:border-box; 
}
#product_review  dt p {white-space:nowrap; }
#product_review  dt p.star {color:#f3ae3d;}
#product_review  dt p:nth-child(1) {width:150px; }
#product_review  dt p:nth-child(2) {width:100%; white-space:normal;}
#product_review  dt p:nth-child(3) {width:100px; text-align:right;}
#product_review  dt p:nth-child(4) {width:80px; text-align:right;}

#product_review  dt:hover { background: #f9f9f9; }

#product_review   dd {
  background-color: #f9f9f9;
  display: none;
  border-bottom: 1px solid #ddd;
  line-height: 1.4;
  font-size:1em; color:#666;
  padding:15px 10px;   
}


 

.mypage .in {display:flex}
.mypage aside {width:200px; border:1px solid #ddd;  box-sizing:border-box; margin-top:-1px}
.mypage aside div {background-color:var(--main_c); color:#fff;  text-align:center; padding:20px; box-sizing:border-box}
.mypage aside div.flex {padding:0;}
.mypage aside div.flex p {border-top:1px solid rgba(255,255,255,.5); border-right:1px solid rgba(255,255,255,.5); text-align:center; width:50%; padding:15px; font-size:15px}
.mypage aside div.flex p + p {border-right:none}
.mypage aside div  b {width:100%; display:block; margin-bottom:2px; font-size:1.1em; color:#fff;}
.mypage aside ul {margin-top:20px; width:80%; margin-left:10%}
.mypage aside ul li {border-bottom:1px solid #ddd; padding-bottom:8px; margin-bottom:8px}
.mypage aside ul li:last-child {border-bottom:none}
.mypage aside ul li a:hover {text-decoration:underline}
 
.mypage aside ul li h4 {color:#111; font-size:1.03em; font-weight:500}

.mypage .h3_flex {display:flex; margin-bottom:15px;  align-items:flex-end}
.mypage .h3_flex h3 {width:auto; margin-bottom:0;}
.mypage .h3_flex  p {margin-left:auto}


.m_member_box .box_100 {background-color:var(--main_c); margin-top:30px; color:#fff;  text-align:center; padding:20px; box-sizing:border-box}
.m_member_box .flex { background-color:#fff; color:#111; border:1px solid #ddd; border-top:none;  text-align:center; padding:20px; box-sizing:border-box; padding:0;}
.m_member_box .flex p {  border-right:1px solid #ddd; text-align:center; width:50%; padding:15px; font-size:15px; box-sizing:border-box}
.m_member_box .flex p + p {border-right:none}
.m_member_box  b {width:100%; display:block; margin-bottom:2px; font-size:1.1em}

 

@media screen and (max-width:900px) {

		.number {  width:90px; } 
		.number span {width:27px; line-height:27px }
		.number p { line-height:27px; height:27px;  }

		.mypage .in {flex-wrap:wrap}
		.mypage aside { width:calc(100vw + 10%); margin-left:-5%; border:none; margin-bottom:30px}
		.mypage aside div {display:none; }
		.mypage aside ul {display:flex; padding-left:5%; padding-right:3%;  box-sizing:border-box; width:100vw; margin:0; overflow:auto}
		 
		.mypage aside ul li {border-bottom:none; white-space:nowrap; margin-right:15px;  padding:15px 0;  }
		 .mypage aside ul li.ov a {color:#000; font-weight:600}
		
		.mypage .right_con { width:100%; margin-top:0}
		.mypage .h3_flex {flex-wrap:wrap}
        .mypage .h3_flex  p {width:100%; margin-top:5px}

 	 

 }


.mypage ul.product_list li h4  {font-size:1.05em; font-weight:400; margin-top:8px; margin-bottom:0}

.mypage .box + .box {margin-top:20px}

.coupon_send {display:flex; align-items:center; justify-content:center; gap:10px }
.coupon_send input {border:1px solid #cecece;   height:36px; font-size:.97em; padding:0 10px; width:250px;   border-radius:2px}
.coupon_send a.s_btn {background-color:var(--main_c); color:#fff; width:100px; flex-shrink:0}

.calender_search {display:flex; align-items:center; justify-content:center }
.calender_search input {border:1px solid #cecece; height:32px; font-size:.97em; padding:0 10px;  border-radius:2px}
.calender_search a {display:inline-block; background-color:#fff;  border:1px solid #ddd; margin-left:5px; line-height:32px; font-size:.97em; padding:0 10px; border-radius:2px; }
.calender_search a:last-child {margin-left:13px; background-color:var(--main_c); color:#fff; border:1px solid var(--main_c) }


.event {width:100%; display:flex; gap:20px 0; flex-wrap:wrap; justify-content:space-between;}
.event li {width:49%; cursor:pointer}
.event li img {width:100%}
.event li h4 {margin-top:20px; font-weight:600; margin-bottom:7px;  font-size:1.15em}
.event li p {font-size:1em; color:#333}
.event li div.img {position:relative; padding-bottom:100%; }
 

.event li div.img span.label {position:absolute; font-size:15px; left:20px; top:20px; font-weight:200; width:70px; height:70px;  display:flex; align-items:center;   justify-content:center; 		border-radius:50%;
		background: rgba(0, 0, 0, .1);
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
		color:#fff; 
}

 @media screen and (max-width:900px) {

		.coupon_send input {width:calc(100% - 80px)}
		.coupon_send a.s_btn {  width:80px; }

		
		.calender_search {flex-wrap:wrap;}
		.calender_search.bg_box2 {padding:15px 10px; border:none; background-color:#f1f1f1}
		.calender_search input {  height:30px;   padding:0 5px; width:40%; margin-bottom:5px }
		.calender_search a {margin:0 2px;  padding:0 9px; line-height:30px; font-size:13.5px}
		.calender_search a:last-child {margin-left:2px;   }

   		.event li {width:48%}
		.event li h4 {margin-top:10px; font-size:1em}
   		.event li div.img span.label {width:53px; height:53px; font-size:14px; left:10px; top:10px}

}
 
 

 
.frame {
	 width:100%; 
	 height:46px; 
	 position:relative
}
.frame:after {width:100vw; height:1px; background-color:#ddd; content:'';  position:absolute; left:-4%; top:46px}
.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;  
	
 }
.frame ul li { float:left;
	padding:14px 10px;
    font-size:1.05em;
	color: #555;
	text-align: center;
	cursor: pointer;
}


.topmenu ul li ul li ul li, .activetop>a {color:#000; font-weight: 700;}
.topmenu ul li ul li ul li, .activetop>a:after {content: ""; display: block; width:100%; }

  
.frame.type2 button {position:absolute; top:0; height:100%; z-index:99; color:#333;  background-color:#fff; text-align:right; width:6%; font-size:17px; left:-4% }
.frame.type2 button:last-child { text-align:left; left:auto; right:-4% }
.frame.type2 ul li:first-child {padding-left:2.5%}
.frame.type2 ul li:last-child {padding-right:4%}


.tab2 {display:flex; gap:5px;  width:100%; position:relative;   flex-wrap:wrap}
.tab2 li { font-size:1em; text-align:center; border:1px solid #333; position:relative; z-index:99; box-sizing:border-box;}
.tab2 li a {display:inline-block; padding:7px 30px; box-sizing:border-box;}
.tab2 li.on {background-color:var(--main_c); font-weight:400;}
.tab2 li a {color:var(--main_c)}
.tab2 li.on a {color:#fff}


@media screen and (max-width:900px){
 	.tab2  {margin-bottom:10px}
	.tab2 li { font-size:.96em;  }
	.tab2 li a {padding:6px 15px;}


}


.company01{margin-top:68px; margin-bottom:0;}
.company01 section{background: url(/common/img/company01_.png) right / cover no-repeat, rgba(255, 255, 255, 0.7);  background-blend-mode: hue;  padding: 100px 0; box-sizing:border-box;  filter: hue-rotate(16deg);}
.company01 span{font-size:1.1em;}
.company01 h3{font-size:2.8em; color:var(--main_c); font-weight:800;}
.company01 p{font-size:1.3em; line-height:1.6;}
.company01 b{font-weight:700; color:var(--main_c); }
.company01 ul{padding:30px; box-sizing:border-box; background: rgba(255, 255, 255, 0.5); margin:30px 0; width:auto; display:inline-block; min-width:450px;}
.company01 li{margin-bottom:10px; list-style:disc; margin-left:20px; font-size:1.2em;}
.company01 li:last-child{margin-bottom:0}
.company01 li:marker{color:var(--main_c)}

@media screen and (max-width:900px){
	.company01{margin-top:55px; font-size:.8em;}
	.company01 section{background-color:rgba(255, 255, 255, 0.85); background-position:75% center;}
	.company01 ul{min-width:auto;}
}

.company02 {margin-top:68px; margin-bottom:0; background:#f8f8f8; padding:80px 0; box-sizing:border-box;}
.company02 .in {max-width:1400px;}
.company02 .wrap{display:flex; gap:50px;}
.company02 .wrap .box{display:flex; align-items:start; width:50%; box-shadow: 5px 5px 10px rgb(0 0 0 / 3%); background:#fff;     border-radius: 20px 0 0 20px;}
.company02 .wrap .box img{width:40%;}
.company02 .wrap .box .txtbox{box-sizing:border-box; padding:30px 15px; width:60%;}
.company02 .wrap .box .titbox{font-size:1.6em; display:flex; justify-content:space-between; align-items:end; margin-bottom:15px; border-bottom:1px solid #ddd; box-sizing:border-box; padding-bottom:8px;}
.company02 .wrap .box .titbox b{font-weight:700;}
.company02 .wrap .box .titbox span{font-size:.7em;}
.company02 .wrap .box ul{margin-left:15px;}
.company02 .wrap .box li{position:relative; margin-bottom:10px; font-weight:400; color:#555;}
.company02 .wrap .box li::before{position:absolute;     top: 7px;    left: -10px;    width: 4px;    height: 4px; content:''; background:#555;}

@media screen and (max-width:1000px){
	.company02 .wrap {gap:30px;}
	.company02 .wrap .box{flex-direction:column; gap:0; width:100%; border-radius:20px 20px 0 0}
	.company02 .wrap .box img{width:100%;}
	.company02 .wrap .box .txtbox{width:100%;}
}

@media screen and (max-width:900px){
	.company02{margin-top:55px;}
}

@media screen and (max-width:600px){
	.company02 .wrap {flex-direction:column; }
}