/* reset */
html,body,div,ul,ol,li,dl,dt,dd,blockquote,address,p,h1,h2,h3,h4,h5,h6,header,nav,aside,section,article,footer,main,figure,table,tr,td,caption,thead,tbody,tfoot,form,fieldset,legend {margin: 0; padding: 0;}
li {list-style: none;}
a {text-decoration: none; color: inherit;}
caption {font-size: 0; line-height: 0; height: 0; overflow: hidden; text-indent: -9999px;}
.hide {font-size: 0; line-height: 0; height: 0; overflow: hidden; text-indent: -9999px;}
.clear:before, .clear:after {display: block; content: ''; clear: both;}
.fl {float: left;}
.fr {float: right;}

/* 기본 */
.inner {width: 1712px; margin: 0 auto;}

/* header */
header {position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: #fff; border-bottom: 1px solid #fff; transition: 0.3s;}
.scrolled {border-bottom: 1px solid #eee;}
header .wrap_header {position: relative;}
header .wrap_header h1 {height: 40px; line-height: 40px; font-size: 24px; padding: 30px 0;}
header .wrap_header nav {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 820px; height: 40px; line-height: 40px;}
header .wrap_header nav h2 {position: absolute; width: 0; height: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
header .wrap_header nav ul {display: flex; justify-content: center;}
header .wrap_header nav ul:hover {color: #888;}
header .wrap_header nav ul li a {display: block; font-size: 18px; font-weight: 400; padding: 30px 40px;}
header .wrap_header nav ul li a:hover {color: #000;}

/* mainCont */
main {padding: 100px 0 0;}
#mainCont .wrap_mainCont {display: flex; justify-content: space-between;}
#mainCont .wrap_mainCont .area_banner {position: relative; width: 1712px; height: 800px; border-radius: 40px; background: url(/images/main/main_banner01.png) no-repeat center/cover;}
#mainCont .wrap_mainCont .area_banner strong {position: absolute; bottom: 160px; left: 160px; font-size: 54px; font-weight: 500; color: #fff; text-shadow: 5px 5px 5px rgba(0,0,0,0.4);}

/* cs */
#mainCont .wrap_cs h3 {font-size: 52px; margin: 200px 0 40px 20px;}
#mainCont .wrap_cs .area_info {display: flex; justify-content: space-between;}
#mainCont .wrap_cs .area_info li {position: relative; width: 560px; height: 360px; border-radius: 40px; background: #f5f5f5; box-sizing: border-box; overflow: hidden;}
#mainCont .wrap_cs .area_info li .info_cate {position: absolute; top: 40px; left: 40px;}
#mainCont .wrap_cs .area_info li .info_cate .txt_cate {display: inline-block; height: 40px; line-height: 40px; border-radius: 10px; font-size: 14px; background: #fff; padding: 0 16px;}
#mainCont .wrap_cs .area_info li .info_cate .txt_date {font-size: 14px; margin: 0 0 0 10px;}
#mainCont .wrap_cs .area_info li a {display: inline-block; width: 100%; height: 100%;}
#mainCont .wrap_cs .area_info li .info_title {position: absolute; top: 120px; left: 40px; right: 40px;}
#mainCont .wrap_cs .area_info li .info_title .txt_title {height: 160px; line-height: 1.4; font-size: 30px; font-weight: 600; word-break: keep-all;}
#mainCont .wrap_cs .area_info li .info_tag {position: absolute; bottom: 40px; left: 40px;}
#mainCont .wrap_cs .area_info li .info_tag span {margin-right: 5px; color: #888;}
#mainCont .wrap_cs .area_info:hover li {opacity: 0.5; transition: 0.3s;}
#mainCont .wrap_cs .area_info li:hover {opacity: 1;}

/* footer */
#mainFooter {border: 1px solid #888; margin: 200px 0 0; padding: 0 0 40px;}
#mainFooter .wrap_relation ul {display: flex; padding: 40px 0;}
#mainFooter .wrap_relation ul li {position: relative;}
#mainFooter .wrap_relation ul li a {padding: 0 20px;}
#mainFooter .wrap_relation ul li:first-child a {padding: 0 20px 0 0;}
#mainFooter .wrap_relation ul li::after {content: ""; position: absolute; top: 6px; right: 0; width: 1px; height: 15px; background: #ccc;}
#mainFooter .wrap_relation ul li:last-child::after {display: none;}
#mainFooter .wrap_address {display: flex; justify-content: space-between;}
#mainFooter .wrap_address .area_address address {font-style: normal;}
#mainFooter .wrap_address .area_address p {margin: 20px 0 0;}
#mainFooter .wrap_address .area_address span {margin: 0 10px; color: #ccc;}
#mainFooter .wrap_address .area_call strong {font-size: 30px; line-height: 1;}

/* subCont */
#subCont .wrap_subCont.inner {width: 1296px;}
#subCont .wrap_subCont .area_title {margin: 100px 0 0;}
#subCont .wrap_subCont .area_title h3 {font-size: 52px;}
#subCont .wrap_subCont .area_title span {display: block; font-size: 36px; font-weight: 400; color: #222;}
#subCont .wrap_subCont .area_info .desc {font-size: 18px; font-weight: 400; line-height: 1.8; color: #666;}
#subCont .wrap_subCont .area_info {display: flex; justify-content: space-between; flex-wrap: wrap; margin: 90px 0 0;}
#subCont .wrap_subCont .area_info li {position: relative; width: 410px; height: 360px; border-radius: 40px; background: #f5f5f5; box-sizing: border-box; overflow: hidden; margin: 33px 0 0;}
#subCont .wrap_subCont .area_info li:nth-child(-n+3) {margin: 0;}
#subCont .wrap_subCont .area_info li .info_cate {position: absolute; top: 40px; left: 40px;}
#subCont .wrap_subCont .area_info li .info_cate .txt_cate {display: inline-block; height: 40px; line-height: 40px; border-radius: 10px; font-size: 14px; background: #fff; padding: 0 16px;}
#subCont .wrap_subCont .area_info li .info_cate .txt_date {font-size: 14px; margin: 0 0 0 10px;}
#subCont .wrap_subCont .area_info li a {display: inline-block; width: 100%; height: 100%;}
#subCont .wrap_subCont .area_info li .info_title {position: absolute; top: 120px; left: 40px; right: 40px;}
#subCont .wrap_subCont .area_info li .info_title .txt_title {height: 160px; line-height: 1.4; font-size: 30px; font-weight: 600; color: #222; word-break: keep-all;}
#subCont .wrap_subCont .area_info li .info_tag {position: absolute; bottom: 40px; left: 40px;}
#subCont .wrap_subCont .area_info li .info_tag span {margin-right: 5px; color: #888;}
#subCont .wrap_subCont .area_teacher li {width: 307px;}
#subCont .wrap_subCont .area_teacher li:nth-child(-n+4) {margin: 0;}
#subCont .wrap_subCont .area_info:hover li {opacity: 0.5; transition: 0.3s;}
#subCont .wrap_subCont .area_info li:hover {opacity: 1;}

/* csView */
#subCont .wrap_csView.inner {width: 820px;}
#subCont .wrap_csView .area_title {text-align: center;}
#subCont .wrap_csView .area_title span {font-size: 18px; font-weight: 400; color: #666;}
#subCont .wrap_csView .area_title h3 {font-size: 46px;}
#subCont .wrap_csView .area_btn a {display: block; width: 180px; height: 60px; line-height: 60px; font-size: 18px; font-weight: 500; text-align: center; color: #666; background: #f5f5f5; border-radius: 30px; margin: 90px auto 0;}

/* personalInfo */
#subCont .wrap_csView .area_personalInfo {margin: 90px 0 0; line-height: 1.8; color: #666;}
#subCont .wrap_csView .area_personalInfo h4 {margin: 60px 0 20px; font-weight: 500; color: #222;}
#subCont .wrap_csView .area_personalInfo h4:first-child {margin: 0 0 20px;}
#subCont .wrap_csView .area_personalInfo h5 {margin: 20px 0 0; font-size: 16px; font-weight: 500; color: #666;}