.sub {width:100%; position:relative; overflow:hidden;}
.sub:after {  background:url('/common/img/ci2.png') no-repeat center; background-size:100%; position:absolute; width:300px; height:450px; z-index:-9; right:7%; top:600px;  opacity:.12; filter:grayscale(100%); content:''}


.sub_con {width:100%; margin:0 auto; font-size:16.5px;  font-weight:300; line-height:1.4; position:relative; margin-top:80px;   padding-bottom:100px }
.sub_con .in {max-width:1100px; }
.sub_con h3 {letter-spacing:-1.5px; }
.h5_tit {font-size:1.23em; font-weight:600}

.sub_vi {position:relative; width:100%; height:650px; background:url('/common/img/main_vi3.png') no-repeat bottom; background-size:cover;}
.sub_vi .in {display:flex; flex-direction:column; align-items:center; height:100%; padding-top:130px }
.sub_vi .in h3 {font-weight:500; font-size:2em; color:#111; margin-top:70px}
.sub_vi .in .t1 {font-size:1.2em; font-weight:400; color:#333}
.sub_vi .in .t2 {font-size:1em; font-weight:300; color:#333}
 

@media all and (max-width:900px) {
  .sub_con {font-size:15px}
 
}

 aside {width:100%;    position:relative; z-index:99; margin-top:80px;  }
 aside ul {width:100%; display:flex; justify-content:center;  }
 aside ul li { font-size:1.1em; border:1px solid #999;  display:inline-block; border-radius:50px; margin:0 10px; position:relative; box-sizing:border-box; text-align:Center; font-weight:400;}
 aside ul li a {color:#222; display:inline-block;  padding:11px 50px;  }
 aside ul li.ov {background-color:var(--main_c); border:1px solid var(--main_c);}
 aside ul li.ov * {color:#fff; font-weight:400}

   
   

.about1 .flex {justify-content:center; gap:50px; align-items:center}
.about1 .sub_img {width:500px; height:350px;  position:relative; flex-shrink:0; }
.about1 .sub_img p  {width:calc(100% - 30px); float:right; height:calc(100% - 30px); display:inline-block; background:url('../img/sub_img.png') no-repeat center; background-size:cover !important;  position:absolute; z-index:99;   right:0;}
.about1 .sub_img p.p_2 { opacity:.2;  position:absolute; left:0; bottom:0; z-index:9; } 

.about1  .t1 {font-size:1.2em; font-weight:400}
.about1  .t2 {font-size:1.8em}
.about1  .t2 span {font-weight:900; color:#005468}
.about1  .line {width:1px; background-color:#333; margin:20px 0;  display:inline-block; height:20px;}

.t_bg_box {background-color: #FBF8F2;; text-align:center; padding:30px; width:100%; display:inline-block; box-sizing:border-box}
.t_bg_box b {font-size:1.20em; font-weight:600;  display:block; margin-bottom:8px}
.booking ul {display:flex; flex-direction:column; gap:30px}
.booking ul li p {color:var(--main_c); display:flex; align-items:center;gap:5px; font-size:1.15em; font-weight:600; margin-bottom:10px}
.booking ul li p span {background-color:var(--main_c); font-family: 'Roboto'; letter-spacing:0;  color:#fff; font-weight:400; font-size:16px; line-height:30px; padding:0 10px; border-radius:5px}
.booking ul li b { display:block; font-weight:500;  margin-top:10px;  margin-bottom:5px}
  

/* 섹션 제목 */
.sec-title{font-size: 1.8em;   margin-bottom:30px }
.sec-desc { margin: -6px 0 18px; }

/* 특징 리스트 */
 .feature-list{ list-style: none; padding: 0; display: grid;  }
.feature-item{position: relative; overflow: hidden; display:flex; gap:30px; align-items:center}
.feature-item .img {width:50%; flex-shrink:0;  height:300px; background-color:#ddd}
.feature-item:nth-child(2) .img {order:2}
 .feature-list span {font-size:20px}
.feature-title{ display:block; font-weight:600;   font-size:1.2em; color:#111; margin-top:10px}
.feature-desc {margin-top:3px; color:#333; margin-top:5px}


/* 코스 리스트 */
.course-grid{
 display:flex;
 flex-wrap:wrap;
align-items:flex-start;
   gap: 20px;
}
.course-card{
  width:calc(50% - 10px);
    border: 1px solid rgba(20, 90, 60, .16);
 position:Relative; 
  background: #fff;
  border-radius:10px; 
  padding: 22px; 
  box-sizing:border-box;
   transition: transform .18s ease, box-shadow .18s ease;
}
 
.course-top {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom: 13px;
 
}
.course-badge{
  flex:0 0 auto;
   color: #fff;
 background-color:var(--main_c); 
  padding:6px 15px; 
  border-radius:50px; 
/*     position:absolute;
       right:10px; 
       top:10px;  */

}
.course-name{  font-size:1.2em;  color:var(--main_c) }
.course-desc{
 margin-bottom:15px; 
 color:#333; 
 font-size:.95em; 
 }

/* 메타 정보 */
.course-meta{
  font-size:.95em; 
  padding:17px; 
   background:rgba(20, 90, 60, .05);
 }
.course-meta > div {
  display:flex;
  gap: 10px;
  margin:5px 0
 
 
}
.course-meta > div:last-child{ border-bottom: 0; }
.course-meta dt{ font-weight:500; width: 70px; color:#000  }
 
/* 공통 제공 */
.program-common{
   padding: 22px 20px;
  box-sizing:border-box; 
  border-radius: 18px;
 border: 1px solid rgba(20, 90, 60, .16);
    background: linear-gradient(180deg, rgba(20, 90, 60, .12), rgba(20, 90, 60, .02));
 }
 
.common-list {display:flex; align-items:center; gap:10px; justify-content: center;}
.common-list li {border:1px solid #333; border-radius:50px; padding:10px 20px}

 

.card-head { width:100%; text-align:center; margin-bottom:30px }
.card-head span {color:var(--main_c); font-weight:400}
.card-head h3 {font-size:1.8em; letter-spacing:-1px;}

/* Values Grid */
.values-grid{
  list-style: none;
  padding: 0;
  
  display: grid;
  gap: 12px;
}
.value-item{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(0,0,0,.01));
  padding: 20px 0; 
  gap:20px; 
  position:relative;
  display:flex;
  align-items:center; 
  overflow:hidden; 
}
.value-item .icon {width:150px; padding:0 20px; box-sizing:border-box; flex-shrink:0; text-align:center; align-items:center; justify-content: center;}
.value-item .icon img {width:100%} 
.badge{ width:45px;  height:45px;  display: inline-flex; align-items: center; justify-content: center; font-weight:600; background: rgba(20,90,60,.12); color: rgba(20,90,60,1); position:absolute; right:0; top:0; }
.value-item h4 {margin-bottom:8px; font-weight:600; font-size:1.16em}

/* Check list */
.check-list{
  
  padding: 0;
  list-style: none;
  display: grid;
 
}
.check-list li{
  position: relative;
  padding-left: 22px;
  
  opacity: .9;
}
.check-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  opacity: .75;
}

/* Story */
.story {background-color:#ddd; padding-top:100px; padding-bottom:100px;  background:url('/common/img/main_vi44.png') no-repeat bottom; background-size:cover; position:relative;} 
.story * {color:#fff}
.story span {color:#fff}
.story:after {width:100%; height:100%; position:absolute; left:0; top:0; content:''; background:rgba(0,0,0,.5); }
.story .card-head {  position:relative; z-index:99}
.story .story-box { position:relative; z-index:99; font-size:1.1em; font-weight:400;  line-height:1.7}
 
/* Product Grid */
.product-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:30px; 
  
}
.product{
    background: #fff;
  display:flex;
  flex-direction:column;
  gap:3px
}
 .product img { }
 .product h4 {margin-top:-60px; font-size:1.15em; height:60px; displaY:flex; align-items:center; justify-content:center;   color:#fff; background: rgba(0, 0, 0, .1);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); margin-bottom:15px}
 .product b {font-weight:600; font-size:1.1em; margin-bottom:2px;  display:block}
  .product p {color:#333}


 /* Promise */
.promise-inner {
  border-radius: 18px;
  padding: 22px;
  border: 1px solid rgba(20,90,60,.16);
  background: linear-gradient(180deg, rgba(20,90,60,.12), rgba(20,90,60,.02));
  text-align:center
}
   
.promise-tags{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
     justify-content: center;
}
.promise-tags li{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20,90,60,.18);
  background: rgba(255,255,255,.75);
   opacity: .9;
}
.promise-foot{
  margin: 14px 0 0;
  line-height: 1.7;
  opacity: .8;
}
 .promise-foot2 {
  margin:5px 0 0;
  line-height: 1.7;
   font-weight:500;
color:var(--main_c);
font-size:1.1em; 
}