.main-visual{width: 100%; position: relative;margin:0 auto;overflow: hidden; background: linear-gradient(rgba(28, 38, 91, 0.2), rgba(28, 38, 91, 0.2)), url("../images/main/main.png") center center no-repeat; background-size: cover;}
.main-visual .mv-con{height: 645px;}
.main-visual .mv-con > .txt{font-size: 42px; font-family: 'Pretendard', sans-serif; color:#fff;text-shadow: 0 0 5px rgba(0,0,0,0.7); padding-top: 163px; padding-left: 40px;font-weight: 600}

.msection1{width: 100%;margin: 0 auto;background: #ededed;}
.mic-area{position: relative;padding-bottom: 60px;}
.m-board-area{position: absolute;right: 0;top: -234px;width: 40%;height: 234px;box-sizIng: border-box;padding: 28px;background: #fff;}
.mb-more{position: absolute;right: 20px;top: 30px;display: inline-block;padding-right: 16px;font-size: 13px;color: #666;line-height: 1;background: url(../images/main/more02.png) right 1px top no-repeat;}
.mb-btns{font-size: 0;margin-bottom: 24px;}
.mb-btns > li{display: inline-block;margin-right: 30px;position: relative;}
.mb-btns > li:after{content: "";position: absolute;right: -15px;top: 50%;width: 1px;height: 18px;background: #bfbfbf;margin-top: -9px;}
.mb-btns > li:last-child{margin-right:0;}
.mb-btns > li:last-child:after{display: none;}
.mb-btns > li > a{display: block;font-size: 16px;color: #5e5e5e;line-height: 1;font-weight: bold;}
.mb-btns > li.on > a{color: #ff2424;}
.mb-box{height: 135px;overflow: hidden;}
.mb-box > .mb_lines{display: none;}
.mb-box > .mb_lines.on{display: block;}
.mb-box > .mb_lines > ul > li{margin-bottom: 14px;}
.mb-box > .mb_lines > ul > li > a{display: block;font-size: 15px;color: #666;line-height: 1;width:99%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mb-box > .mb_lines > ul > li > a:hover{color:#3c497b;}
.mb-box > .mb_lines > ul > li:last-child{margin-bottom: 0;}

.mic-box{position: relative;}
.mic-box:after{content: "";display: inline-block; position: absolute;left:40%;width: 40%; height: 100%; top: 0;bottom: 0;height: 100%;background: url('../images/main/mic-c.jpg') center center no-repeat;background-size: cover; }
.mic-line{position: relative;z-index: 1;}
.mic-line > li{float: left;width: 20%;height: 234px;display: table;text-align: center;}
.mic-line > li > a{width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;  padding: 5px;}
.mic-line > li.bg1 > a{background: #2853bf;}
.mic-line > li.bg2 > a{background: #0e3151;}
.mic-line > li.bg3 > a{background: #fff;}
.mic-line > li.bg4 > a{background: rgba(14,49,81,0.8);}
.mic-line > li.bg5 > a{background: #3752c3;}
.mic-line > li.bg6 > a{background: #218fe5;}
.mic-line > li.bg7 > a{background: #fff;}
.mic-line > li > a > span{display: block;font-size: 0;margin-bottom: 15px;}
.mic-line > li > a > p{font-size: 15px;color: #fff;}
.mic-line > li > a > p > span{display: block;font-size: 25px; font-family: 'Pretendard'; margin-bottom: 10px;font-weight: 600}
.mic-line > li.bg3 > a > p, .mic-line > li.bg7 > a > p{color: #3a3a3a;}
.mic-line > li.bg1{position: absolute;left: 40%;top: -234px;}
.mic-line > li.bg4{margin-left: 20%;}
.mic-line > li.bg6{margin-left: 20%;}
.mic-line > li.bg7{margin-left: 40%;}
.mic-line > li:hover > a > span{transform:rotateY(360deg);transition: all 0.4s ease-in-out;}

.popupzone .slideArea .bx-viewport{overflow: hidden;}
.popupzone .slideArea .bx-controls{position: absolute;top:10px;right: 0;width: 70px;}
.popupzone .slideArea .bx-controls-direction a{position: absolute;display: block;width:20px;height: 20px; font-size: 0;}
.popupzone .slideArea .bx-controls-direction .bx-prev{left:-3px; background: url(../images/main/arrow-left.png) center no-repeat; }
.popupzone .slideArea .bx-controls-direction .bx-next{right: 3px; background: url(../images/main/arrow-right.png) center no-repeat;}
.popupzone .slideArea .bx-controls-auto .bx-controls-auto-item{position: absolute;left: 23px;} 
.popupzone .slideArea .bx-controls-auto-item a{display: none; width:8px;height: 10px;font-size: 0;position: relative;}
.popupzone .slideArea .bx-controls-auto-item .bx-start{background: url(../images/main/stop.png) center no-repeat; }
.popupzone .slideArea .bx-controls-auto-item .bx-stop{background: url(../images/main/play.png) center no-repeat; }
.popupzone .slideArea .bx-controls-auto .bx-controls-auto-item .active{display: block;z-index: 5;}
.popupzone .slideArea .sliderAcc {position: absolute;top:10px;right:28px}
.popupzone .slideArea .sliderAcc .ctl .bx-controls-auto-item > a {display: block;width:20px;height: 20px;background: url(../images/main/stop.png) center no-repeat;}
.popupzone .slideArea .sliderAcc .ctl .bx-controls-auto-item > .bx-stop.start{background: url(../images/main/play.png) center no-repeat;}



/* service  */

.service2{background-color: #fff;padding: 55px 0 72px 0;}
.service2 .title{font-size: 35px;font-weight: 700;color:#333333;margin: 0 0 45px 0;text-align: center;}
.service2 .serviceList{display: flex;flex-wrap: wrap;border-top:1px solid #d0d0d0;justify-content: center;}
.service2 .serviceList li{position: relative; width: 14.28%;border-bottom:1px solid #d0d0d0}
.service2 .serviceList li::before{content:"";display: block;position: absolute;left:0;top:0; width: 1px;height:21px ;background-color:#d0d0d0 ; }
.service2 .serviceList li::after{content:"";display: block;position: absolute;left: 0;bottom: 0; width: 1px;height:21px ;background-color:#d0d0d0 ; }
.service2 .serviceList li:first-child::before{display: none;}
.service2 .serviceList li:first-child::after{display: none;}
/* .service2 .serviceList li:nth-child(5):before{display: none;}
.service2 .serviceList li:nth-child(5):after{display: none;} */
.service2 .serviceList li a{display: block;padding: 48px 0 0 0;}
.service2 .serviceList li a .ico{height: 73px;display: flex;align-items: center;justify-content: center;margin: 0 0 10px 0;transform: translate(0, 0);transition: all 0.4s ease-out;}
.service2 .serviceList li a .txt{display: block;height: 70px; text-align: center;font-size: 18px;color: #333333;font-weight: 500;}
.service2 .serviceList li:hover{background: #f3f3f3}
.service2 .serviceList li:hover .ico{transform: translateY(-5px);transition: all 0.4s ease-out;}

/* service  */





@media screen and (max-width:1024px){
    .main-visual .mv-con > .txt{font-size: 36px;}
	.mic-area{position: relative;padding: 25px 80px;}
	.mic-box:after{display: none;}
	.m-board-area{position: relative;right: auto;top: auto;width: 66.66666666%;margin-left: 33.33333333%;}
	.mic-line > li{width: 33.333333333%;}
	.mic-line > li.bg1{left: 0;top: -234px;}
	.mic-line > li.bg4{margin-left: 0;}
	.mic-line > li.bg6{margin-left: 0;}
	.mic-line > li.bg7{margin-left: 0;}
	.mic-line > li.bg4 > a{background: linear-gradient(rgba(28, 38, 91, 0.6), rgba(28, 38, 91, 0.6)), url(../images/main/mic-b.jpg) center center no-repeat;background-size: cover;}

	.msection2{display: none;}
	
	    .service2 .serviceList {justify-content: flex-start;}
    .service2 .serviceList li {width: 50%;}
    
    .service2 .serviceList li:nth-child(3):before{display: none;}
	.service2 .serviceList li:nth-child(3):after{display: none;}
    .service2 .serviceList li:nth-child(5):before{display: none;}
	.service2 .serviceList li:nth-child(5):after{display: none;}
	.service2 .serviceList li:nth-child(7):before{display: none;}
	.service2 .serviceList li:nth-child(7):after{display: none;}
}

@media screen and (max-width:767px){
	.main-visual{background: url(../images/main/main.png) center center no-repeat;background-size: cover;}
	.main-visual .mv-con{height: 370px; display: flex; align-items: center; justify-content: center;}
    .main-visual .mv-con > .txt{padding:0; font-size: 29px;}
	.mic-area{position: relative;padding: 20px 0;}
	.mic-box{padding-bottom: 234px;}
	.m-board-area{width: 100%;margin-left: 0;}
	.mic-line > li{width: 50%;}
	.mic-line > li.bg1{position: static;}
	.mic-line > li.bg4{position: absolute;left: 0;bottom: -234px; width: 100%; background: url(../images/main/mic-b.jpg) center center no-repeat; background-size: 100% auto;}
	.mic-line > li.bg4 >a{width: 50%; height: 100%; background: rgba(14, 49, 81,0.7); float:right}
	
	.mic-box:after{display: block;left:0;width: 100%;top: auto;bottom: 0;height: 234px;background: url(/images/graduateNew/main/mic-b.jpg) right center no-repeat;background-size: cover;}
	
	.service2 .title{font-size: 23px;margin-bottom: 15px;}
    .service2 .serviceList li a .txt{font-size: 13px;font-weight: 300;}
    .service2 .serviceList li::before{height: 18px;}
    .service2 .serviceList li::after{height: 18px;}
    


}
@media screen and (max-width:520px){
	.main-visual .mv-con{height: 290px;}
    .main-visual .mv-con > .txt{padding:0; font-size: 26px;}

	.m-board-area{height: auto;padding: 20px 12px;}
	.mb-more{top: 20px;}
	.mb-btns{margin-bottom: 15px;}
	.mb-btns > li{margin-right: 14px;}
	.mb-btns > li:after{right: -7px;height: 13px;margin-top: -7px;}
	.mb-btns > li > a{font-size: 15px;}
	.mb-box{height: 110px;}
	.mb-box > .mb_lines > ul > li{margin-bottom: 10px;}
	.mb-box > .mb_lines > ul > li > a{font-size: 14px;}
	.mic-box{padding-bottom: 200px;}
	.mic-line > li{height: 200px;}
	.mic-line > li.bg4{bottom: -200px;}
	.mic-line > li > a > span img{width: 70px;}
	.mic-line > li > a > p{font-size: 14px;}
	.mic-line > li > a > p > span{font-size: 21px;margin-bottom: 8px;}
}

@media screen and (max-width:420px){
	.main-visual .mv-con{height: 220px;}
    .main-visual .mv-con > .txt{ font-size: 20px;}
	.mic-box{padding-bottom: 180px;}
	.mic-line > li{height: 180px;}
	.mic-line > li.bg4{bottom: -180px;}
	.mic-line > li > a > p{font-size: 13px;}
	.mic-line > li > a > p > span{font-size: 19px;}
	
	.service2 .serviceList li a{padding-top: 20px;}
    .service2 .serviceList li a .ico{height: 40px;}
    .service2 .serviceList li a .ico img{height: 32px;}
    .service2 .serviceList li a .txt{height: auto;padding-bottom: 10px;}
	
}

/* main.css  추가*/
* {
	box-sizing: border-box;
}
 



/* 컨트롤 추가 */

.popupzone .ctrl {
	display: flex;
	background: #ffffff94;
	border-radius: 6px;
	position: absolute;
	right: 7px;
	bottom: 10px;
}
.popupzone .ctrl .ctrl-s {
	margin: 0 4px;
}
.mic-line > li.popupzone > a {
	padding: 0;
}