@font-face {
    font-family: 'InkLiquid';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}


.p_t {font-family: 'InkLiquid';  }

.sub_con {width:100%;  padding-bottom:100px; margin:0 auto;   font-size:16px;  font-weight:300; line-height:1.6; color:#333 }
.sub_con section {position:relative; }
.sub_con .sub_hr {height:50px}

.sub_con .vi {position:relative; border-radius:0 0 50px  50px; overflow:hidden; width:100%; height:600px; background:url('/common/img/vi_bg2.png') no-repeat center; background-size:cover;}
.sub_con .vi.bg11 { background:url('/common/img/sub_vi1.jpg') no-repeat center; background-size:cover;}
.sub_con .vi.bg12 { background:url('/common/img/sub_vi1_1.jpg') no-repeat center; background-size:cover;}
.sub_con .vi.bg21 { background:url('/common/img/sub_vi2.jpg') no-repeat center; background-size:cover;}
.sub_con .vi.bg21:after {content:''; position:absolute; left:0; top:0; background:rgba(0,0,0,.4); width:100%; height:100%}
.sub_con .vi.bg22 { background:url('/common/img/sub_vi2_1.png') no-repeat center; background-size:cover;}
.sub_con .vi.bg3 { background:url('/common/img/sub_vi3.jpg') no-repeat center; background-size:cover;}
.sub_con .vi.bg4 { background:url('/common/img/sub_vi4.jpg') no-repeat center; background-size:cover;}
.sub_con .vi.bg5 { background:url('/common/img/sub_vi55.jpg') no-repeat center; background-size:cover;}
.sub_con .vi.bg6 { background:url('/common/img/sub_vi6.jpg') no-repeat center; background-size:cover;}



.sub_con .vi .in.tit_div {position:Absolute;  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);  color:#111; z-index:9  }
.sub_con .vi:after {content:''; background:rgba(0,0,0,.2); width:100%; height:100%; position:absolute; left:0; top:0;}
.sub_con .vi h3 {  font-weight:500; margin-top:-80px;  padding-left:7px; font-size:3em; font-weight:700; color:#fff; text-shadow:none;  letter-spacing:-1px  }
.sub_con .vi p {color:#fff}
.sub_con .vi p.t1 {font-size:1.2em; font-weight:300; color:#fff}

section.section1 {margin-top:100px !important;  }


aside.in {width:100%; border-radius:10px; background: rgba(255, 255, 255, 1); box-shadow:3px 3px 10px rgba(0,0,0,.1);  position:relative; z-index:99;  margin-top:-30px }
aside {width:100%; background: rgba(255, 255, 255, 1);   position:relative; z-index:99; border-bottom:1px solid #ddd  }
aside ul {width:100%; display:flex; justify-content:center;  }
aside ul li { font-size:1.15em;  padding:17px 0;  margin:0 25px; position:relative; box-sizing:border-box; text-align:Center; font-weight:400;}
aside ul li:after { content:''; width:0; height:4px; background-color: var(--main_c); position:absolute; left:50%; bottom:0; transition: all 0.3s ease-out;}
aside ul li a {color:#444}
 
aside ul li:hover:after {width:100%; left:0 }
aside ul li:hover a {color:var(--main_c); font-weight:500 }
aside ul li.ov:after {width:100%; left:0 }
aside ul li.ov * {color:var(--main_c); font-weight:500}
 
 
@media all and (max-width:900px) {
		.sub_con { font-size:14px;   }
		.sub_con .vi {border-radius:0; height:450px}
		.sub_con .vi h3 {font-size:2em}
		.sub_con .vi p.t1 {font-size:1em}
		aside.in {border-radius:0}
		aside ul {overflow:auto;   }
		aside ul li { font-size:1.05em; white-space:nowrap;   padding:17px 0;  margin:0 10px;  }
		aside ul li:first-child {margin-left:20px}
/* 		aside ul:after {content:'--------'; color:#fff;     }
		 */


}




.about1 {}
.about1 .in {gap:60px}
.about1 .img {width:500px; flex-shrink:0;}
.about1 .t .t1 {font-size:1.7em; color:#111; font-weight:800; }
.about1 .t .t2 {font-size:1.3em; margin-top:5px;  font-weight:500}
.about1 .t b {font-weight:500}


@media all and (max-width:900px) {
		.about1 .img {width:100%; }
		.about1 .t .t1 {font-size:1.5em;} 
		.about1 .t .t2 {font-size:1.1em; }


}
.top_text {text-align:center; width:100%;   margin-bottom:40px}
.top_text span {color:var(--main_c); font-weight:500; font-size:15px; margin-bottom:13px; display:block;  letter-spacing:1px}
.top_text h3 {font-size:2em; font-weight:600;   color:#000;  }
.top_text p {font-size:1em; margin-top:5px}
/* .top_text h3:before {width:17px; height:2px; background-color:var(--main_c); display:block; margin:0 auto;  margin-bottom:6px;  content:''}
 */
 h3.tit {font-size:1.8em; text-align:center; color:#000; display:inline-block; width:100%; margin-bottom:40px}
 hr.dotted_line {border-top:2px dotted #555; margin:60px 0}


ul.img_list {flex-wrap:wrap; gap:30px;  }
ul.img_list li {width:calc(25% - 23px); background-color:#fff; padding-bottom:15px; border:1px solid #ddd; box-sizing:border-box;  text-align:center}
ul.img_list li img { width:100%; box-sizing:border-box; margin-bottom:10px }



@media all and (max-width:900px) {
	 .top_text h3 {font-size:1.7em}
	 ul.img_list {gap:20px 0; justify-content:space-between }
	 ul.img_list li {width:48%;  }


}

section.bg_section {border-top:none !important; background-color: var(--bg1); padding-bottom:100px }
section.bg_section  + section {margin-top:0 !important; border-top:none !important}
.bg_img {position:Absolute; top:-40px; right:100px; z-index:-9}

@media all and (max-width:900px) {
		 .bg_img {display:none}

}


.service .section2 {border-top:none; margin-top:0; padding-top:110px  }


.sub_con.service {padding-bottom:0}
.service  section {position:relative}
.service  section + section {margin-top:100px; padding-top:100px;  border-top:1px solid #ddd}

.service .top_bg_box {position:relative; width:100%; box-sizing:border-box; padding:110px 70px; color:#fff; background-size:cover !important}
.service .top_bg_box .in {position:Relative; z-index:9}
.service .top_bg_box:after {content:''; width:100%; height:100%; background:rgba(0,0,0,.7);  position:absolute; left:0; top:0; }

.service .top_bg_box ul li {border: 1px solid transparent;
  border-image: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,1)) 1;  background: rgba(0, 0, 0, .05);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
	font-size:1.06em;
	padding:30px; 
	font-weight:200;
	position:relative
 	}
.service .top_bg_box ul li h5 {font-size:1.2em; font-weight:500}
.service.service1 .top_bg_box ul li  {font-size:1.1em; font-weight:300}
.service .top_bg_box h4 {font-size:1.7em; font-weight:600; margin-bottom:30px}
.service .top_bg_box h4.p_t {font-size:2.6em; line-height:1.2; font-weight:400}
.service .top_bg_box ul li b {position:absolute; font-size:17px; font-weight:500; background-color:#fff; width:45px; line-height:45px; color:#111;  top:-1px; right:-1px; font-family:'Montserrat'}


@media all and (max-width:900px) {
		.service .top_bg_box {padding:50px 30px}
		.service .top_bg_box ul {flex-wrap:wrap}
		.service .top_bg_box ul li {width:100%}
		.service.service1 .top_bg_box ul li {padding:20px 60px}

}

.service1 .section1 .t1 {font-size:2em;}
.service1 .section1 .t2 {font-size:1.5em;}

.service1 .section2 ul li .icon_one {width:80px; height:80px; border:none;  border-radius:0; margin-bottom:5px}
.service1 .section2 ul li b {color:#111; font-size:1.2em}
.service1 .section5 h3 {font-size:2.5em}

.service2 .section2 ul  {justify-content:space-between}
.service2 .section2 ul li {width:32%; text-align:center}
.service2 .section2 ul li p {border:1px solid #ddd; padding:20px; font-size:1.05em; font-weight:300; margin-top:-6px; box-sizing:border-box; width:100% }
.service2 .section4  h3 {font-size:2.5em}


@media all and (max-width:900px) {
		.service1 .section1 .t1 {font-size:1.6em;}
		.service1 .section1 .t2 {font-size:1.1em;}

		.service1 .section5 h3 {font-size:2em}

		.service2 .section2 ul li {width:100%}
		.service3 .section4 h3 {font-size:2em}

}

.step {gap:50px; width:100%}
.step img { }
.step li {width:25%; line-height:0; position:relative; box-sizing:border-box}
.step li div {width:100%; line-height:1.4; padding-top:25px; box-sizing:border-box}
.step li:after {content:'\f101'; font-family:"Font Awesome 5 Free"; font-weight:600; font-size:25px; position:absolute; text-align:center;  width:50px; top:0;    right:-50px; color:#222; top:110px}
.step li:last-child:after {display:none}

.step span {position:Absolute; top:20px; right:20px; background-color:var(--main_c); color:#fff; padding:5px 15px; border-radius:50px; font-size:15px;  display:inline-block; letter-spacing:0; font-family:'Montserrat'}
.step h6 {font-size:1.25em; color:#111; font-weight:600; margin-bottom:10px }

 @media all and (max-width:900px) {
	.step  {gap:20px 0; }
	.step.flex.col-4 li {width:100% }
	.step li:after {display:none}
	.step span {font-size:14px; top:10px; right:10px}

}

.gradient  {
    position: absolute;
    width: 100%;
    height:200px;
    background: linear-gradient(
  to bottom,
  rgba(237, 247, 246, 0) 0%,
  rgba(237, 247, 246, .8) 30%,
  rgba(237, 247, 246, 1) 100%
   );
    bottom: 0;
    left: 0;
    display: inline-block;
	z-index:9;
  
 }


.before_after {width:100%; display:flex;    gap:30px 0; flex-wrap:wrap; justify-content:space-between}
.before_after .box {width:calc(50% - 20px); display:flex; gap:50px}
.before_after .box div {width:100%; padding-bottom:250px; background-size:cover !important; position:relative}
 
.before_after .box div:after {content:'\f101'; font-family:"Font Awesome 5 Free"; font-weight:600; font-size:25px; position:absolute; text-align:center;  width:50px; top:0; right:-50px; color:#222; top:110px}

.before_after .box div:last-child:after {display:none}
.before_after .box div span {background-color:#fff; border-radius:50px; font-size:15px;  padding:3px 20px; color:#333; position:absolute; right:10px; top:10px; font-family:'Montserrat'; font-weight:400}
.before_after .box div:nth-child(2n) span {background-color:var(--main_c); color:#fff}

 @media all and (max-width:900px) {
	.before_after .box {width:100%; flex-direction:column; }
	.before_after .box div:after {top:auto; bottom:-50px; font-size:20px; height:50px; right:auto; left:50%; margin-left:-25px;  transform: rotate(90deg);}
	.before_after .box div span {font-size:14px}



}

.review_list  {flex-wrap:wrap; gap:30px 0; padding-bottom:60px;  justify-content:space-between; position:Relative}


.review_list li {width:23%; position:Relative  }
.review_list li div {width:100%; height:100%; background-color:#fff; box-shadow:3px 3px 6px rgba(0,0,0,.05); text-align:Center;   border-radius:10px; box-sizing:border-box; padding:60px 60px; position:relative; font-size:.92em; color:#333; }
.review_list li div + div {margin-top:50px;}
.review_list li div:after {content:''; width:45px; height:45px; background:url('https://ydmei.yonsei.ac.kr/common/img/tit_bl.png') no-repeat; background-size:100%; position:Absolute; left:20px; top:20px; }
.review_list li div:before {content:''; width:45px; height:45px; background:url('https://ydmei.yonsei.ac.kr/common/img/tit_bl.png') no-repeat; background-size:100%; position:Absolute; right:20px; bottom:20px; transform: rotate(-180deg);}
.review_list li b {margin-bottom:10px; font-size:1.3em; color:#000; font-weight:600}


 @media all and (max-width:900px) {
  .review_list li {width:100%}

}

.pay .bg_img {position:Absolute; top:-50px; right:100px; z-index:9}

.pay_box {display:flex; width:100%; justify-content:space-between}
.pay_box div {width:31%; border:2px solid var(--main_c); display:flex; flex-direction:column; gap:20px 0 ;  border-radius:20px;  padding:40px 20px; box-sizing:border-box; box-shadow: 3px 3px 6px rgba(0, 0, 0, .05);}
.pay_box div h4 {width:100%; color:#111;  text-align:center; font-size:1.4em; border-bottom:1px solid var(--main_c); padding-bottom:10px;  display:inline-block}
.pay_box div dl {width:100%;   font-size:1em; display:flex; flex-wrap:wrap}
.pay_box div dl dt {width:40%; color:#111; font-weight:400; margin:2px 0 }
.pay_box div dl dd {width:60%; letter-spacing:0px; margin:2px 0 }
.pay_box div:nth-child(2) dl dt {width:20%;  }
.pay_box div:nth-child(2) dl dd {width:80%;  }
.pay_box div:nth-child(3) dl dt {width:20%;  }
.pay_box div:nth-child(3) dl dd {width:80%;  }
.pay_box div dl dd:after {content:'원'; margin-left:1px}
.pay_box div a {width:100%; font-size:1.1em; font-weight:400;  margin-top:auto; background-color:var(--main_c); color:#fff;  text-align:center; line-height:50px; display:inline-block }
.pay_box div a:hover {border-radius:50px}


 @media all and (max-width:900px) {
  .pay_box {flex-wrap:wrap; gap:20px 0}
  .pay_box div {width:100%; border-radius:10px}

}

.sub_con.pay {padding-bottom:0}
.pay section  {margin-top:100px; padding-top:100px;  border-top:1px solid #ddd}
.pay section.vi {margin:0; padding:0}
.pay section.section1 {  padding-top:0; border:none}
.pay #grafico {
	position:relative;
	height:300px;
	border-left:2px solid #000000;
	border-bottom: 2px solid #000000;
	width:100%;
	margin-top:20px;
}
.pay table {display:none}
.pay .riga {
	position:absolute;
	left:0;
	height: 1px;
	background-color:gray;
	width: 100%;
}
.pay .riga div {
	float:left;
	margin: -8px 0 0 -60px;
}
 
.pay .bar{
	position:absolute;
	width: 4%;
	bottom: 0;
	background: linear-gradient(120deg, #7babb4, #89cac4);
	margin-left:2.5%; 
	color:#fff;
	border-radius:5px 5px 0 0;
	text-align:center; 
	box-sizing:border-box;
	padding-top:10px; 
 }
 .pay .bar#col0 {left:0}
 .pay .bar#col1 {left:10%}
 .pay .bar#col2 {left:20%}
 .pay .bar#col3 {left:30%}
 .pay .bar#col4 {left:40%}
 .pay .bar#col5 {left:50%}
 .pay .bar#col6 {left:60%}
 .pay .bar#col7 {left:70%}
 .pay .bar#col8 {left:80%}
 .pay .bar#col9 {left:90%}
 
 .pay .section2 .in {max-width:1450px}
.pay .section2 .point_div {gap:60px;  }
.pay .section2 .point_div div.box {width:100%; max-width:600px}
.pay .section2 .point_div span.t_color b {letter-spacing:1px; font-weight:600; margin-bottom:10px; display:block}
.pay .section2 .point_div h4 {font-size:1.8em; color:#111;  margin-bottom:10px; font-weight:600; line-height:1.5}

.pay .section2 .box_list {gap:0; border:2px solid var(--main_c); /* box-shadow: 3px 3px 6px rgba(0, 0, 0, .05); */ }
.pay .section2 .box_list li {padding:30px 20px; width:100%; gap:15px; align-items:center;  text-align:left; border:none; position:relative}
/* .pay .section2 .box_list li:after {content:''; width:1px; height:60%; right:0; top:20%; position:absolute; background-color:#ddd }
.pay .section2 .box_list li:last-child:after {display:none }
 */
 
 .pay .section2 .box_list p.icon {line-height:0; border:1px solid #999; width:90px; height:90px; display:flex; justify-content:center;  align-items:center; border-radius:5px }
 
.pay .section2 h6 {font-size:1.2em; color:#111; font-weight:600; position:relative; display:inline-block;  margin-bottom:6px}
.pay .section2 h6:after {width:100%; height:10px; background-color:var(--main_c2); opacity:.3; content:''; z-index:-9; position:absolute; left:0; bottom:0px}

.pay .section3 .flex.data {margin-top:10px}
.pay .section3 .flex.data p {width:10%; text-align:center; font-size:15px; letter-spacing:1px; line-height:1.1; }
.pay .section3 .top_text p {font-size:1.2em}


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

		.pay .section2 .box_list {flex-wrap:wrap; gap:10px 0; border:none; justify-content:space-between}
		.pay .section2 .box_list li {width:48%; border-radius:10px; justify-content:center; text-align:center;  padding:20px 15px; gap:0px; box-sizing:border-box; border:1px solid #ddd }
		.pay .section2 .box_list li:after {display:none}

		.pay .section2 .box_list li p.icon {width:65px; height:65px; border:none; margin:0 auto}
		.pay .section2 .box_list li p.icon img {scale:.7}
		.pay .section2 .box_list li div {width:100%}
 
		.pay .section2 .point_div {gap:30px}
		.pay .section2 .point_div div {order:2}
		.pay .section2 .point_div div.box {order:1; padding:0 10%; box-sizing:border-box}
		.pay .section2 .point_div div.r {text-align:left !important}
  		.pay .section2 .point_div h4 {font-size:1.3em; }


		.pay .bar {width:15%}
		.pay .bar:nth-child(n+11) {border:1px solid red; display:none }
		.pay .bar#col0 {left:0%}
		.pay .bar#col1 {left:20%}
		.pay .bar#col2 {left:40%}
		.pay .bar#col3 {left:60%}
		.pay .bar#col4 {left:80%}
		.pay .section3 .flex.data p {width:20%;  font-size:14px; text-align:center}
		.pay .section3 .flex.data p:nth-child(n+6) {border:1px solid red; display:none }


}

/* 오버레이 */
  .cert-lightbox {
    position: fixed; inset: 0;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.75);
    z-index: 99999999999999999999999999999999;
  }
  .cert-lightbox.open { display: flex; }
  body.cert-no-scroll { overflow: hidden; }

  /* 다이얼로그 */
  .cert-lightbox__dialog {
    position: relative;
    max-width: 96vw; max-height: 96vh;
    outline: none;
  }

  /* 큰 이미지 */
  .cert-lightbox__img {
    display: block;
    max-width: 96vw; max-height: 84vh;
   
    background: #fff;
  }

  /* 캡션 */
  .cert-lightbox__caption {
    margin-top: 10px;
    text-align: center;
     background:rgba(0,0,0,.5);
	 color: #fff;
     width:100%; 
 	position:absolute;
	 bottom:0;
	 left:0;
	 font-size:.96em; 
 	 padding:10px;
	 box-sizing:border-box; 
   z-index:99;
   display:none 
  }

  /* 닫기/이동 버튼 */
  .cert-lightbox__btn {
    position: absolute; 
    width: 50px; height: 50px;
    background:rgba(0,0,0,.5);
    color: #fff; font-size:15px;  font-weight: 700;
    display: flex; justify-content:center;  align-items:center; 
    cursor: pointer;
  }
   .cert-lightbox__close { right:0 }
  .cert-lightbox__prev, .cert-lightbox__next {
    top: 50%; transform: translateY(-50%);
  }
  .cert-lightbox__prev { left:0}
  .cert-lightbox__next { right:0 }





.csr .tab_wrap  { margin-bottom:30px;  align-items:center; gap:10px}
 
.csr .tab_wrap select {height:35px; padding:0 5px; color:#333; font-size:15px; border:1px solid #ddd;   }
.csr .tab_wrap form + form {margin-left:auto}
.csr .tab_wrap .search {margin-bottom:0}
  
@media all and (max-width:900px) {

  .csr2 .flex select {margin-left:auto }


}