@charset "utf-8";

/*
 * content CSS Document
 * KOWEB
 */

.wrapper{width:1200px; margin:0 auto;}

.area_students{padding-top:110px;}
.area_students h6{font-size:20px;}
.area_students article{position:relative;}
.area_students article:first-child:after{display:none;}
.area_students article::after{content:''; position:absolute; top:16px; right:0; display:block; background-color:#808080; width:100%; height:1px; z-index:-1;}
.area_students article:last-child{border-bottom:1px solid #808080;}
.area_students article h3{display:inline-block; background-color:#000; padding-right:24px;}
.area_students article > div{padding:50px 40px 120px;}
.area_students article > div p{margin-bottom:32px;}
.area_students article > div p:last-child{margin-bottom:0;}

.area_students .about > div{display:flex; align-items:center;}
.area_students .about_img{min-width:320px; height:400px; background-position:50%; background-repeat:no-repeat; background-size:cover; margin-right:130px;}
.area_students .about_img::after{content:''; display:block; position:relative; z-index:-1; bottom:-40px; left:40px; width:100%; height:100%; border:10px solid #fff; box-sizing:border-box; transition:0.6s;}
.area_students .about_info h2{margin-bottom:30px; background: -webkit-linear-gradient(325deg ,#2ccfd5 0,#077abf 40%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.area_students .about_info p{padding-left:40px; margin-bottom:8px;}

.area_students .education dl{margin-bottom:24px; display:flex; flex-wrap:wrap;}
.area_students .education dl dt{min-width:210px;}
.area_students .education dl dd{width:calc(100% - 210px);}
.area_students .education dl:last-child{margin-bottom:0;}
.area_students .education dl dd span{padding-left:15px; display:block;}

.area_students .publication h6{position:relative; padding-left:42px; margin-bottom:48px;}
.area_students .publication h6::before{position:absolute; top:9px; left:0; content:''; width:27px; height:4px; background-color:#fff;}
.area_students .publication li{word-break:keep-all; position:relative; padding-left:12px; margin-bottom:20px;}
.area_students .publication li::before{position:absolute; left:0;}
.area_students .publication ul li{padding-left:12px;}
.area_students .publication ul li::before{top:9px; content:''; width:3px; height:3px; border-radius:50%; background-color:#fff;}
.area_students .publication ol{counter-reset:num;}
.area_students .publication ol li{padding-left:30px;}
.area_students .publication ol li::before{top:0; counter-increment:num; content:counters(num, ".") ". ";}
.area_students .publication ol + h6,
.area_students .publication ul + h6{margin-top:64px;}

@media all and (max-width:1480px){
	.wrapper{width:calc(100% - 4vw);}
	.area_students .about_img{margin-right:100px;}
	.area_students .about > div{padding-left:0; padding-right:0;}
}

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

@media all and (max-width:980px){
	.area_students .about_img{min-width:40%; height:0; padding-bottom:50%; margin-right:80px;}
	.area_students .about_img::after{bottom:-30px; left:30px; width:100%; height:0; padding-bottom:120%; border:8px solid #fff;}
	.area_students .about_info p{padding-left:5px;}
}

@media all and (max-width:767px){
	#sub h3{font-size:24px;}

	.area_students article > div{padding:30px 20px 70px;}
	.area_students article > div p{margin-bottom:16px;}

	.area_students .about > div{align-items:flex-start;}
	.area_students .about_img{margin-right:50px;}
	.area_students .about_img::after{bottom:-15px; left:15px; background-color:#fff; opacity:0.5;}
	.area_students .about_info h2{margin-bottom:24px;}

	.area_students .education dl{flex-direction:column;}
	.area_students .education dl dt{min-width:auto; font-weight:bold; margin-bottom:5px;}
	.area_students .education dl dd{width:100%;}

	.area_students .publication h6{margin-bottom:20px;}
	.area_students .publication li{margin-bottom:10px;}
}

@media all and (max-width:600px){
	.area_students .about > div{flex-direction:column;}
	.area_students .about_img{margin:0 auto; width:80%; padding-bottom:100%;}
	.area_students .about_img::after{display:none;}
	.area_students .about_info{margin-top:50px;}
	.area_students .about_info p{padding-left:20px;}

}

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

@media all and (max-width:480px){
	.wrapper{width:95%;}
	.area_students article > div{padding:20px 5px 60px;}

	.area_students .about_img{width:100%; padding-bottom:125%;}
	.area_students .about_info p{padding-left:5px;}

}