@charset "utf-8";

.mr80 {margin-left:80px;}

#sub_visual .bg {background: url('/img/education/top_education_bg.jpg') no-repeat center center;}

#sub_menu ul li {width:50% !important;}
#sub_menu ul li a {color:#fff}
#sub_menu ul li.on {background-color:#fff;}
#sub_menu ul li.on a {color:#000}

.flaxcc {display: flex;align-items: center;}

.container_sub h2 {font-size:25px;font-weight:bold;margin-bottom:15px;margin-left:0px;}
.container_sub h2::before {content: "";display: inline-block;background-color: #000;width:17px;height:17px;margin-right:10px;background: url('/img/common/dot_h2.jpg') no-repeat center center;}
.container_sub .sub-title {font-size:21px;font-weight:bold;line-height:40px;}
.container_sub .info {margin-bottom:60px;}
.container_sub .info li {float:left;width:100%;background-color:#f8f9fc;padding:25px;margin-bottom:5px;border-radius: 15px;}
.container_sub .info li img {float:left;}
.container_sub .info li .box {float:left;width: 80%;margin-left:20px;}
.container_sub .info li ul  {margin-left:30px;width:100%;}
.container_sub .info li ul li {padding:0px;margin-bottom:0px;list-style: disc;}
.container_sub .info li ul li span  {display:block;}
.container_sub .info li ul li span.red { color:#ed0f28;font-size:16px;}
.container_sub .about span  {display:block;}

.container_sub .list {display:grid;grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr;gap: 8px;font-size:18px;}
.container_sub .list > div {border:1px solid #dedede;text-align:center;color:#666666;padding-bottom:30px;border-radius: 15px;background-color:#F0F2F6}
.container_sub .list > div span  {display:block;}
.container_sub .list > div img {width:100%;object-fit: cover;border-top-left-radius: 15px;border-top-right-radius: 15px; margin-bottom: 15px;} /* 이미지와 h3 사이 간격 추가 */
.container_sub .list > div:nth-child(2n) {position: relative;border:none;background-color:unset;display: flex;justify-content: center;align-items: center;}
.container_sub .list > div:nth-child(2n) span {position: absolute;left:0;top:30%;}
.container_sub .list [class^="arrow-"] {display: inline-block;border-radius:0;width:30px ;height:50px;}
.container_sub .list h3 {font-weight:bold;line-height:45px;margin-bottom:10px;}
.container_sub .list .small {font-size:13px;}
.container_sub .btn {width:500px;height:80px;margin:100px auto 0;position: relative;padding-bottom:10px;}
.container_sub .btn .bg  {background:url('/img/common/application_01.png') no-repeat;width:110px;height:109px;display: inline-block;position: absolute;left: 0;bottom: 0;z-index:1;}
.container_sub .btn .txt {color:#fff;line-height:80px;font-size:30px;text-align:center;border-radius: 15px;background:#034691;width:90%;position: absolute;right: 0;bottom:5px;z-index:0;}

.container_sub .btn2 {width:500px;height:100px;margin:50px auto 0;position: relative;padding-bottom:10px;}
.container_sub .btn2 .bg  {background:url('/img/common/application_01.png') no-repeat;width:110px;height:109px;display: inline-block;position: absolute;left: 0;bottom: 0;z-index:1;}
.container_sub .btn2 .txt {color:#fff;line-height:90px;font-size:30px;text-align:center;border-radius: 15px;background:#666;width:90%;position: absolute;right: 0;bottom:5px;z-index:0;}


@media screen and (min-width:1300px) {
}

/*sub1.css*/

@media screen and (min-width:800px) and (max-width:1300px){
	.container_sub .list {display:grid;grid-template-columns: 1fr 30px 1fr;grid-template-rows:1fr 60px 1fr; gap: 8px;font-size:18px;}
	.container_sub .list > div:nth-child(4) {grid-column: span 3;}
	.container_sub .list .arrow-2 {transform: rotate(90deg);margin-right:-50%}
	.container_sub .list .arrow-3 {transform: rotate(180deg);}
 	.container_sub .list .item3 {grid-area: 3 / 3;}
	.container_sub .list .item4 {grid-area: 3 / 1;}
}

@media screen and (max-width:1000px){
	.container_sub .info li {padding: 15px;}
	.container_sub .info li img {text-align:center;margin-bottom:20px;}
	.container_sub .info li ul {width:100%;}
	.container_sub .info li ul li span {width:95%;}	
}

@media screen and (max-width:800px){
	.container_sub .list {grid-template-columns: 1fr;grid-template-rows:1fr 60px 1fr 60px 1fr 60px 1ft;}
	.container_sub .list > div:nth-child(2n) span {position: absolute;left:0;top:10%;}
	.container_sub .list [class^="arrow-"] {transform: rotate(90deg);}
	.container_sub .btn {width:100%;margin:50px 0 0;line-height:100px;font-size:25px;}
	.container_sub .btn .txt {font-size:20px;padding-left: 40px;}
	.flaxcc {flex-direction: column;align-items:flex-start;}
	.flaxcc > :first-child {
	  align-self: center; 
	}
}