:root {
  --main_c : #253254;
}

:root {
  --main_c2 : #1c2e5d;
}



.in{max-width:1400px; margin:0 auto;}

.main_wrap iframe{max-width:1400px; margin:140px auto; margin-bottom:80px;  width:100%; height:500px; display: block;}
 
.main_con * {transition: all 0.3s ease-out;}
.main_con {font-size:1.1em; line-height:1.5}
.main_con h2 {font-size:2.2em; line-height:1; color:var(--main_c); margin-bottom:30px; font-weight:800; letter-spacing:-1px; }
.main_con p {font-size:1em; margin-bottom:30px; font-weight:300;}
#container {  width:100%; display:inline-block;  }

.flex {display:flex}
.ac {align-items:center !important; }
.as {align-items:flex-start !important; }
.ad {align-items:flex-end !important; }
.jt {justify-content:flex-start !important; }
.jc {justify-content:center !important; }
.js {justify-content:space-between !important; }
.main_c{color:var(--main_c) !important;}
.box_100 { width: 100%; display:inline-block}
.basic_btn {padding:15px 50px; display:inline-block; box-sizing: border-box; background: var(--main_c);    color: #fff;}
a.basic_btn + a.basic_btn {background-color:#fff; border:1px solid var(--main_c); color:var(--main_c);  margin-left:5px}
a.s_btn {display:inline-block; box-sizing:border-box; border:1px solid var(--main_c); color:var(--main_c);   text-align:center; width:70px; font-size:.95em;  line-height:34px; background-color:#fff }
a.s_btn i {margin-right:3px}
a.s_btn2 {display:inline-block; box-sizing:border-box;  border:1px solid #111; color:#111;   text-align:center; padding:0 15px; font-size:.95em;  line-height:34px; }
 
.bg_box2 {background-color:#f5f5f5; box-sizing:border-box; padding:17px}


footer {width:100%; background:var(--main_c); font-size:1rem; font-weight:300; padding:60px 0;  box-sizing:border-box; line-height:1.5em; display:inline-block; border-top:1px solid rgba(255,255,255,.3); box-sizing:border-box; }
footer *{color:rgba(255,255,255,.5); } 
footer h2 {margin-bottom:10px; }
footer .flex{gap:50px;}
footer .txtbox{width:100%;}
footer ul{display:flex; gap:25px; margin-bottom:7px;}
footer li{font-weight:600; cursor:pointer; position:relative; font-size:1.05em;}
footer li::after{position:absolute; content:''; width:2px; height:78%; right:-15px; top:3px; background:rgba(255,255,255,.3); }
footer li:last-child::after{display:none;}
footer .top_wrap{padding-bottom:10px; margin-bottom:10px;}
footer span{display:inline-block; margin-top:10px; width:100%;}
footer b{font-weight:600;}

footer .top_link { text-align:Center; display:inline-block;  position:fixed; right:20px; bottom:200px; box-sizing:border-box;}
footer .top_link i {font-size:6em; color:#0bc143; }

.quick_kakao{
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 9999;

  padding:13px 9px;
  box-sizing:border-box;
  border-radius: 10px;
  color: #111827;
  background: #FEE500; /* Kakao yellow */
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;

  display:flex; align-items:center; justify-content:center;
}

.quick_kakao:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 52px rgba(0,0,0,.28);
}	

.quick_kakao i{font-size:2em;}

@media screen and (max-width:1200px){
	.in{padding:0 10px; box-sizing:border-box;}
}

@media all and (max-width:900px) {
    .flex {flex-wrap: wrap;}
	.m_flex {flex-wrap:nowrap;width:100%}
	 a.basic_btn + a.basic_btn {margin-left:0; margin-top:10px;}
	 footer {line-height:1.4em; padding-right:0; font-size:.9rem;}
	 footer .flex{gap:0px;}
	 footer .top_link {margin-right:0}
	 footer h2 {margin-bottom:10px; font-size:1.6em}

	.main_wrap iframe{height:130vw; margin: 0; margin-top:56px; height:34vw;}
	.main_con h2{font-size:1.5em; margin-bottom:20px;}

	.quick_kakao{right:20px; bottom:20px;}
}

.course{/* background:#f7f7f7;  */padding:100px 0; box-sizing:border-box;}
.course h2{display:flex; justify-content:space-between; align-items:end; }
.course h2 span{color:var(--main_c)}
.course h2 a{font-size:18px; font-weight:400;}
.course ul{display:flex; gap:20px; flex-wrap:wrap;     align-items: normal;}
.course li{width:calc(25% - 15px); overflow:hidden; /* box-shadow: 5px 5px 10px rgb(0 0 0 / 3%); */ cursor:pointer; }
.course li .imgbox{position:relative; /* overflow:hidden; height:10vw;  */ }
.course li .imgbox img{
/* 	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
	border-radius: 10px;
}
.course li .txtbox{padding:15px 5px; box-sizing:border-box;}
.course li .tag{font-size:.9em; color:#777;}
.course li h3{font-size:1.1em; line-height:1.3; font-weight:700; 
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course .price *{letter-spacing:0;}
.course .price span{text-decoration: line-through; font-weight:300;  }
.course .price b{font-weight:600;  font-size:1.2em; color:var(--main_c)}

.course li .txtbox > p{
  font-size:.8em;
  background:#f3f3f3;
  padding:8px 13px;
  box-sizing:border-box;
  border-radius:6px;
  display:inline-block;
  margin:5px 0 7px 0;
  font-weight:300;
  
}

.course li .txtbox .cate{  margin-top:5px;}
.course li .txtbox .cate span{
  font-size:.75em;
  color:var(--main_c);
  border:1px solid var(--main_c);
  padding:5px 13px;
  box-sizing:border-box;
  border-radius:20px;
  display:inline-block;

}


@media all and (max-width:900px) {
	.course{padding:60px 0;}
	.course ul{gap:10px;}
	.course li{width:calc(50% - 5px); }
	.course li .txtbox{font-size:.7em; padding:10px;}
	.course li  h3{-webkit-line-clamp:1;}
	.course li .imgbox{height:27vw;}
}

.coach{background: url(../img/sp.png) bottom / cover no-repeat, rgba(255, 255, 255, 0.85);    background-blend-mode: hue; margin:0; padding:80px 0; box-sizing:border-box;}
.coach .in{}
.coach ul{display:flex; gap:60px; justify-content:center;}
.coach li{text-align:center; cursor:pointer;}
.coach li img{height:350px;}
.coach h3{font-size:1.5em; display:flex; gap:10px; align-items:end; justify-content:center; margin-top:10px;}
.coach h3 b{font-weight:700;}
.coach h3 p{font-size:.75em; margin-bottom: 0;}

@media all and (max-width:900px) {
	.coach{padding:60px 0;}
	.coach ul{gap:10px;}
	.coach li img{height:auto;}
	.coach h3{flex-direction:column; font-size:1.1em; gap:0; align-items:center;}
}



.best-section{background:var(--main_c); margin:0; padding:100px 0; box-sizing:border-box;}
.best-section .in{display:flex; gap:30px;}

/* wrapper */
.best-head{margin-bottom:14px; width:25%; flex-shrink:0;}
.best-head h2{color:#fff;}
.best-head p{color:rgba(255,255,255,.7);}

/* arrows */
.best-arrows{display:flex;gap:12px}
.best-arrows button{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #e2e5ea;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.best-arrows button:hover{background:#f7f8fa}
.best-section #bestSwiper{
  flex: 1 1 0;
  min-width: 0;
  width: 0;      
  height: auto;      
}

.best-section a{display:block; width:100%;}
.best-section dl{width:100%; padding: 30px; box-sizing:border-box; border-radius:10px;  background:rgba(255,255,255,.2); min-height:350px;}

.best-section dt{display:flex; gap:10px; align-items:end; justify-content:space-between;  margin-bottom:10px; border-bottom:1px solid #ccc; padding-bottom:5px; box-sizing:border-box; color:rgba(255,255,255,.6); font-size:.9em;}
.best-section dt i{color:#ccc; font-size:1em;}
.best-section dd{line-height:1.6; font-size:1em; font-weight:200; color:rgba(255,255,255,.9);
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.best-section .star{text-align:right; margin-top:10px;}
.best-section .star i{color:#f3ae3d; font-size:1em;}
.best-section .user{display:flex; gap:5px; align-items:center; color:rgba(255,255,255,.8);}

@media all and (max-width:900px) {
  .best-section{padding:60px 0;}
  .best-section .in{flex-direction:column; gap:0}
  .best-head{width:100%;}
  .best-section #bestSwiper{width:100%; height:auto !important; flex: 0 0 auto;  } 
  .best-section dl{min-height:240px; padding:20px; font-size:.9em;}
  .best-section dd{-webkit-line-clamp: 6;}
}