.bodyarea{}
.bodyarea .bodyWrap{}

.top{position: relative; }
.top::after{display: block; content:''; position: absolute; top:0; bottom:0; left:0; right:0; margin:auto; background: rgba(0,0,0,.5);}
.top .wrap{display: flex; align-items: center; height: 65vh; z-index: 1; justify-content: center;}
.top .segment{text-align: center;}
.top .segment .title{ font-size: 60px; line-height: 1.5em; color:#fff; font-family: 'Pretendard-Regular';margin-top: 20px;}
.top .segment .text{font-size: 30px; line-height: 1.7em; color:#fff; margin-top: 30px; font-family: 'Pretendard-Regular';}
.top .back_img{text-align: right;}
.top .back_img img{}

.bottom{margin-top: 70px; display: flex; justify-content: space-between; width: 104%; margin-left:-2%;}
.bottom ul{width:29.33%; margin: 0 2%; position: relative; padding:0 3%;}
.bottom ul li{font-size: 18px; letter-spacing: -.04em; line-height: 1.6em; color:#666}
.bottom ul li.title{font-size: 18px; line-height: 1.5em; color:#333; margin-bottom: 10px; font-weight: bold}
.bottom ul li .box{display: table; width:100%; font-family: 'Pretendard-Regular'; margin-bottom: 10px;}
.bottom ul li .box .inner:first-of-type{display: table-cell; vertical-align: middle; width:40%; color:#666}
.bottom ul li .box .inner:last-of-type{display: table-cell; vertical-align: middle; width:60%; color:#333}
.bottom ul li .noti{font-size: 14px; margin-top: 40px;}
.bottom ul li a{position: absolute; bottom:0; width:80%; border:none; text-align: center; padding: 10px 20px; font-size: 14px; color:#fff; text-decoration: none; border-radius: 6px; display: block;}
.bottom ul li a:hover, .bottom ul li a:focus, .bottom ul li a:active{font-weight: 600;}
.bottom ul li a img{height: 20px;}

@media screen and (max-width:1199px) {
	.top{}
	.top .segment{}
	.bottom ul li.title{font-size: 18px;}
	.bottom ul li{font-size: 14px;}
	.bottom ul li .noti{font-size: 13px;}
	.bottom ul li a{ font-size: 13px;}
	.bottom ul li a img{top:-2px;}
}

@media screen and (max-width:1000px) {
	
}

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

@media screen and (max-width:780px) {
	.top{}
	.top .wrap{height: 500px}
	.top .segment{width: 90%;}
	.top .segment .logo img{height: 44.8px;}
	.top .segment .title{font-size: 40px;}
	.top .segment .text{font-size: 18px;}
		
	.bottom{display: block; width: 100%; margin-left:0; margin:60px 0;}
	.bottom ul{width: 100%; margin:0; margin-top: 40px;}
	.bottom ul li .box{width: 420px;}
	.bottom ul li a{position: static; margin-top: 40px; width: 40%;}
}

@media screen and (max-width:620px) {
	.top .wrap{height: 450px}
	.top .segment .title{font-size: 32px;}
	.top .segment .text{font-size: 16px;}
		
	.bottom{margin-top: 70px;}
	.bottom ul{margin-top: 40px;}
	.bottom ul li a{margin-top: 40px; width: 50%;}
	.bottom ul li.title{font-size: 16px;}
	.bottom ul li{font-size: 13px;}
	.bottom ul li .noti{font-size: 12px; margin-top: 30px;}
	.bottom ul li a{ font-size: 12px;}
}

@media screen and (max-width:520px) {
	.top .wrap{height: 330px}
	.top .segment .logo img{height: 28px;}
	.top .segment .title{font-size: 28px;}
	.top .segment .text{font-size: 15px; margin-top: 10px;}
	.top .segment .text div{display: none;}
		
	.bottom{margin-top: 60px;}
	.bottom ul li a{margin-top: 40px; width: 60%;}
	.bottom ul li.title{font-size: 14px;}
	.bottom ul li{font-size: 12px;}
	.bottom ul li .noti{font-size: 11px;}
	.bottom ul li a{ font-size: 11px;}
}

@media screen and (max-width:420px) {
	.top .wrap{height: 290px}
	.top .segment .title{font-size: 24px;}
	.top .segment .text{font-size: 14px;}
		
	.bottom{margin-top: 50px;}
	.bottom ul li .box{width: 100%;}
	.bottom ul li a{margin-top: 40px; width: 70%;}
}