/*레이아웃 설정*/
.full_container .inner_container{max-width:1200px; width:95%; margin:0 auto}

/*header*/
.header{border-bottom:1px solid #eee; position:absolute; z-index:999; width:100%; background:#fff}
.header .header_inner{display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; height:80px}
.header .header_inner .main_menu{width:690px}
.header .header_inner .main_menu li{display:inline-block;}
.header .header_inner .main_menu li + li{padding-left:125px}
.header .header_inner .main_menu li a{font-size:18px; color:#222; font-weight:700; position:relative}



#menu_dept{position: absolute; z-index:1; width: 100%; background: #fff; border-top: 1px solid #eee; border-bottom:1px solid #eee}
#menu_dept > div{display:flex; flex-flow:row wrap; justify-content:flex-end}
#menu_dept > div > ul{width:690px}
#menu_dept > div > ul > li{display:inline-block; vertical-align:top}
#menu_dept > div > ul > li ul li:first-child{padding-top:25px}
#menu_dept > div > ul > li ul li{width:65px; padding-bottom:30px}
#menu_dept > div > ul > li:nth-child(2){margin-left:115px}
#menu_dept > div > ul > li:nth-child(2) ul li{width:90px}
#menu_dept > div > ul > li:nth-child(3){margin-left:100px}
#menu_dept > div > ul > li:nth-child(3) ul li{width:100px}
#menu_dept > div > ul > li ul li a{font-size:16px; color:#666; font-weight:700; text-align:center; display:block}

.active_menu:after{content:''; position:absolute; width:15px; height:4px; background:#214ba0; bottom:-26px; left:40%}
.header .header_inner .main_menu li:last-child .active_menu:after{left:42%}

/*-------------------모바일 메뉴----------------------*/
.gnbWrap{
    padding-top: 10px; padding-bottom: 8px;
    width: 890px; margin: 0 auto;
}
.gnbWrap>img{
    width: 250px; height: 42px;
}
/* 모바일 메뉴 버튼 */
.mobile_menu {position: absolute; top: 50%; right:10px; transform: translateY(-50%);}
.mobile_menu>a{width: 100%;height: 100%; display: block; font-size:24px; color:#214ba0;}

a.close{
    background-color: #fff; width: 50px; height: 50px;
	font-size:22px;
    position: absolute; right: 0; top: 0; color: #999;
    line-height: 50px; text-align: center;
}
.left_gnbWrap{
    height: 100vh;
    width: 75%;
    position: fixed; right: -75%; top: 0;
    background-color: #fff;
    padding-top: 50px;
    z-index: 999;
    transition: all 0.3s;
}
.left_gnbWrap.on{
    right:0;
}
.left_gnb>li{
    width: 100%;
	border-top:1px solid #eee;
}
.left_gnb>li:last-child{border-bottom:1px solid #eee;}

.left_gnb>li>a{
    display: block; text-align: left; line-height: 50px;
    width: 100%; height: 50px; background-color: #fff;
    color: #214ba0; font-size:16px;
	padding:0 15px; font-weight:600;
}
.left_gnb>li>a.on{
    background-color: #f3f3f3;
}
.left_gnb>li>ul{
    display: none;
}
.left_gnb>li>ul>li>a{
    display: block; text-align: left; line-height: 50px;
    width: 100%; height: 50px; background-color: #eee;
    color: #222; font-size:14px;
	padding:0 15px;
}

.left_gnb>li>ul>li>ul>li{padding:10px 20px; font-size:14px;}

.left_gnb>li>span{display: block;
    text-align: left;
    line-height: 50px;
    width: 100%;
    height: 50px;
    background-color: #fff;
}
.left_gnb>li>span a{ color: #214ba0; font-size: 16px; display:block; width:100%; padding:0 15px; font-weight: 600;}
/*-------------------모바일 메뉴----------------------*/

/*main*/
.main_slider{margin-bottom:0!important}
.main_slider .main_slider_inner{height:100vh}
.main_slider .main_slider_inner.slider1{background:url('/img/main/slider1.jpg') no-repeat center; background-size:cover; background-position-y:80px}
.main_slider .main_slider_inner.slider2{background:url('/img/main/slider2.jpg') no-repeat center; background-size:cover; background-position-y:80px}
.main_slider .main_slider_inner.slider3{background:url('/img/main/slider3.jpg') no-repeat center; background-size:cover; background-position-y:80px}



.main_slider .main_slider_inner > div{height:100%; display:table}
.main_slider .main_slider_inner > div div{display:table-cell; vertical-align:middle}
.main_slider .main_slider_inner > div div h2{text-align:center; font-size:60px; color:#fff; font-weight:300; line-height:1.2em}
.main_slider .main_slider_inner > div div h2 strong{font-weight:900}
.main_slider .main_slider_inner > div div h2:after{content:''; display:block; width:100%; height:1px; background:rgba(255,255,255,0.3); margin:40px 0}
.main_slider .main_slider_inner > div div p{font-size:25px; color:#fff; font-weight:400; text-align:center}
.main_slider .main_slider_inner > div div p .m_block{display:none}

.main_slider .dots-wrap{width:100%; position:absolute; bottom:32px; display:flex; flex-flow:row wrap; align-items:center; justify-content:center}
.main_slider .slick-dots{position:static; width:125px; padding-bottom:18px}
.main_slider .slick-prev,
.main_slider .slick-next{position:static; width:7px; height:11px}
.main_slider .slick-prev{background:url('/img/main/main-prev.png') no-repeat center; background-size:cover; margin-right:10px}
.main_slider .slick-prev:before{display:none}
.main_slider .slick-next{background:url('/img/main/main-next.png') no-repeat center; background-size:cover; margin-left:10px}
.main_slider .slick-next:before{display:none}

.main_slider .slick-dots li{width:8px; height:8px; border-radius:8px; background:#fff; margin:0 15px; position:relative}
.main_slider .slick-dots li button{width:8px; height:8px;}
.main_slider .slick-dots li.slick-active button:before,
.main_slider .slick-dots li button:before{display:none}

.main_slider .slick-dots li:before{content:''; width:8px; height:8px; border-radius:32px; border:1px solid #fff; transition:0.2s ease; position:absolute; left:0; top:0}
.main_slider .slick-dots li:hover:before,
.main_slider .slick-dots li.slick-active:before{width:32px; height:32px; left:-12px; top:-12px}


.portfolio{padding:100px 0 55px; background:#f1f1f1}
.portfolio h2{font-size:40px; font-weight:800; color:#222; display:inline-block}
.portfolio .tab_title{display:inline-block; float:right; padding-top:10px}
.portfolio .tab_title li {list-style: none; float: left; width: 135px; height:40px; line-height:37px; border-radius:5px; cursor: pointer; text-align: center; border: 2px solid #214ba0; font-size:15px; font-weight:500; color:#214ba0}
.portfolio .tab_title li + li{margin-left:10px}
.portfolio .tab_title li.current {background-color: #214ba0; color:#fff}

.portfolio_content{background:#f1f1f1 url('/img/main/portfolio_back.jpg') no-repeat center; padding-bottom:100px; background-position-y:65px}
.portfolio_content .tab-content{display: none}
.portfolio_content .tab-content.current{display: inherit}
.portfolio_content .tab-content .portfolio_slider{margin-bottom:0!important}
.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div{display:flex; flex-direction:row; flex-wrap:nowrap}
.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div{width:50%; overflow:hidden; border-top-left-radius:20px; border-bottom-right-radius:20px}
.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div img{width:100%}
.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div{padding:100px 0 0 50px; border-radius:0}
.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div h3{font-size:28px; color:#fff; font-weight:800; word-break:keep-all}
.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div h3:after{content:''; display:block; width:100%; height:1px; background:rgba(255,255,255,0.3); margin:25px 0 20px}
.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div p{font-size:17px; font-weight:300; color:rgba(255,255,255,0.7); line-height:1.6em}
.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div button{transition:0.2s ease; width:150px; height:40px; line-height:37px; font-size:15px; color:#fff; font-weight:300; text-align:center; background:transparent; border:1px solid #fff; margin-top:35px; border-bottom-right-radius:10px; border-top-left-radius:10px}
.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div button:hover{background:#fff; color:#222; font-weight:400}

.portfolio_content .tab-content .portfolio_slider .slick-prev,
.portfolio_content .tab-content .portfolio_slider .slick-next{width:11px; height:19px}
.portfolio_content .tab-content .portfolio_slider .slick-prev:before,
.portfolio_content .tab-content .portfolio_slider .slick-next:before{display:none}
.portfolio_content .tab-content .portfolio_slider .slick-prev{background:url('/img/main/port-prev.png') no-repeat center; background-size:cover; left:-50px}
.portfolio_content .tab-content .portfolio_slider .slick-next{background:url('/img/main/port-next.png') no-repeat center; background-size:cover; right:-50px}

.custom_notice{padding:100px 0; background:#f1f1f1}
.custom_notice .custom_notice_wrap{display:flex; flex-direction:row; flex-wrap:nowrap}
.custom_notice .custom_notice_wrap > div{width:50%; padding-right:25px}
.custom_notice .custom_notice_wrap > div + div{width:50%; padding-right:0; padding-left:25px}
.custom_notice .custom_notice_wrap > div h3{font-size:30px; font-weight:800; color:#222; display:inline-block; padding-left:10px}
.custom_notice .custom_notice_wrap > div > span{display:inline-block; float:right; padding-right:10px; padding-top:10px}
.custom_notice .custom_notice_wrap > div > span a{font-size:15px; color:#999; font-weight:600; transition:0.2s ease}
.custom_notice .custom_notice_wrap > div > span a:hover{color:#214ba0}

.custom_notice .custom_notice_wrap > div ul{border-top:1px solid #bbb; border-bottom:1px solid #bbb; padding:0 10px; margin-top:20px}
.custom_notice .custom_notice_wrap > div ul li{padding:22px 0}
.custom_notice .custom_notice_wrap > div ul li a span{font-size:16px; color:#222; font-weight:600; display: inline-block; width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing:-0.5px}
.custom_notice .custom_notice_wrap > div ul li a:hover span{color:#214ba0}
.custom_notice .custom_notice_wrap > div ul li a span + span{color:#666; font-size:15px; font-weight:500; float:right; width:auto}

.midascm{background:url('/img/main/midascm_back.jpg') no-repeat center; background-size:cover; padding:100px 0}
.midascm .midascm_wrap{display:flex; flex-direction:row; flex-wrap:nowrap}
.midascm .midascm_wrap > div{width:50%; padding-right:50px}
.midascm .midascm_wrap > div + div{padding-right:0; padding-left:0}
.midascm .midascm_wrap > div + div img{width:100%}
.midascm .midascm_wrap > div h3{padding-top:50px;font-size: 30px; color: #fff; font-weight: 800}
.midascm .midascm_wrap > div h3:after{content: ''; display: block; width: 100%; height: 1px; background: rgba(255,255,255,0.3); margin: 25px 0 20px}
.midascm .midascm_wrap > div p{font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); line-height: 1.6em}
.midascm .midascm_wrap > div button{transition: 0.2s ease; width: 150px; height: 40px; line-height: 37px; font-size: 15px; color: #fff; font-weight: 300; text-align: center; background: transparent; border: 1px solid #fff; margin-top: 65px; border-bottom-right-radius: 10px; border-top-left-radius: 10px}
.midascm .midascm_wrap > div button:hover{background:#fff; color:#222; font-weight:400}

.location{padding:100px 0 30px}
.location h2{font-size: 40px; font-weight: 800; color: #222; text-align:center; padding-bottom:60px}
.location ul{text-align:center}
.location ul li{display:inline-block; vertical-align:top; width:227px}
.location ul li p + p{font-size:18px; font-weight:700; color:#222; padding:8px 0}
.location ul li p + p + p{font-size:15px; color:rgba(34,34,34,0.6); font-weight:500; padding:0; line-height:1.3em}

#daumRoughmapContainer1609902126428{width:100%; height:400px}
#daumRoughmapContainer1609902126428 .wrap_map{height:370px!important}

.logos{padding:100px 0 35px}
.logos h2{font-size: 40px; font-weight: 800; color: #222; text-align: center; padding-bottom: 30px;}
.logos .logos_slider .slick-arrow{display:none}
.logos .logos_slider .logos_slider_inner a img{width:100%}

.logos_btn{border-top:1px solid #eee; padding:25px 0}
.logos_btn ul{text-align:center}
.logos_btn ul li{display:inline-block; vertical-align:middle; padding:0 7px}
.logos_btn ul li span{cursor:pointer}

/*footer*/
.footer{background:#19191a; padding:70px 0 80px}
.footer .f_logo{width:202px; margin:0 auto 50px}
.footer .f_logo img{width:100%}
.footer p{font-size:16px; font-weight:400; color:rgba(255,255,255,0.7); text-align:center; line-height:1.7em; padding-bottom:25px}
.footer .f_copyright{border-top:1px solid rgba(255,255,255,0.2); padding-top:25px}
.footer .f_copyright p{font-size:13px; color:rgba(255,255,255,0.3); text-transform:uppercase; padding-bottom:0}

/*scrolltop buttom*/
#top-button {
  display: inline-block;
  background-color: #214ba0;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#top-button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#top-button:hover {
  cursor: pointer;
  background-color: #333;
}
#top-button:active {
  background-color: #214ba0;
}
#top-button.show {
  opacity: 1;
  visibility: visible;
}

/*****미디어쿼리*****/
@media screen and (min-width: 1921px) {
	.portfolio_content{background-size:cover}
}

@media screen and (max-width: 1280px) {
	/*main*/
	.portfolio_content .tab-content .portfolio_slider .slick-prev{left:-30px}
	.portfolio_content .tab-content .portfolio_slider .slick-next{right:-30px}
}

@media screen and (max-width: 1200px) {
	/*header*/
	.main_slider .main_slider_inner > div div h2{font-size:5vw}

	/*main*/
	.portfolio_content .tab-content .portfolio_slider{padding:0 30px}
	.portfolio_content .tab-content .portfolio_slider .slick-prev{left:-5px}
	.portfolio_content .tab-content .portfolio_slider .slick-next{right:-5px}

	.midascm .midascm_wrap > div p br{display:none}
}


@media screen and (max-width: 1024px) {
	/*header*/
	.header .header_inner .main_menu{width:565px}
	.header .header_inner .main_menu li + li{padding-left:85px}

	#menu_dept > div > ul{width:565px}
	#menu_dept > div > ul > li:nth-child(2){margin-left:75px}
	#menu_dept > div > ul > li:nth-child(3){margin-left:58px}

	/*main*/
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div h3{font-size:26px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div h3:after{margin:20px 0 15px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div p{font-size:16px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div button{margin-top:25px}
}


@media screen and (min-width: 981px) {
	/*header*/
	.mobile_menu, .left_gnbWrap{display:none}
}

@media screen and (max-width: 980px) {
	/*header*/
	.header .header_inner .main_menu, #menu_dept{display:none}
	
	/*main*/
	.main_slider .main_slider_inner > div div h2:after{margin:20px 0}
	.main_slider .main_slider_inner > div div p{font-size:18px}

	.portfolio{padding:70px 0 35px}
	.portfolio h2{font-size:30px}
	.portfolio .tab_title li{width:115px; height:35px; line-height:30px; font-size:13px}

	.portfolio_content{padding-bottom:70px; background-position-y:35px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div{padding:60px 0 0 30px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div h3{font-size:22px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div h3:after{margin:10px 0}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div p{font-size:14px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div button{margin-top:15px; width:130px; font-size:14px}

	.custom_notice{padding:70px 0}
	.custom_notice .custom_notice_wrap > div{padding-right:15px}
	.custom_notice .custom_notice_wrap > div + div{padding-left:15px}
	.custom_notice .custom_notice_wrap > div h3{font-size:24px}
	.custom_notice .custom_notice_wrap > div > span a{font-size:13px}
	.custom_notice .custom_notice_wrap > div ul{margin-top:10px}
	.custom_notice .custom_notice_wrap > div ul li{padding:18px 0}
	.custom_notice .custom_notice_wrap > div ul li a span{font-size:14px}
	.custom_notice .custom_notice_wrap > div ul li a span + span{font-size:13px}

	.midascm{padding:70px 0}
	.midascm .midascm_wrap > div{padding-right:30px}
	.midascm .midascm_wrap > div h3{padding-top:30px; font-size:22px}
	.midascm .midascm_wrap > div h3:after{margin:10px 0}
	.midascm .midascm_wrap > div p{font-size:14px}
	.midascm .midascm_wrap > div button{margin-top:35px; width:130px; font-size:14px}

	.location{padding:70px 0 30px}
	.location h2{font-size:30px; padding-bottom:30px}
	.location ul{display:flex; flex-direction:row; flex-wrap:nowrap}
	.location ul li{width:25%}
	.location ul li p + p{font-size:16px}
	.location ul li p + p + p{font-size:13px}

	#daumRoughmapContainer1609902126428{height:350px}
	#daumRoughmapContainer1609902126428 .wrap_map{height:320px!important}

	.logos{padding:70px 0 35px}
	.logos h2{font-size:30px}

	/*footer*/
	.footer{padding:50px 0 60px}
	.footer .f_logo{margin:0 auto 30px}
	.footer p{font-size:14px; padding-bottom:15px}
	.footer .f_copyright{padding-top:15px}
	.footer .f_copyright p{font-size:12px}
}

@media screen and (max-width: 767px) {
	/*header*/
	.header .header_inner .logo{width:160px}
	.header .header_inner .logo a img{width:100%}

	/*main*/
	.portfolio_content{background-position:bottom}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner{margin:0 5px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div{flex-wrap:wrap}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div{width:100%}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div{padding:40px 0 0}

	.custom_notice .custom_notice_wrap{flex-wrap:wrap}
	.custom_notice .custom_notice_wrap > div{width:100%; padding-right:0}
	.custom_notice .custom_notice_wrap > div + div{width:100%; padding-left:0; padding-top:30px}
	
	.midascm .midascm_wrap{flex-wrap:wrap-reverse}
	.midascm .midascm_wrap > div{padding-right:0; width:100%}

	/*footer*/
	.footer .f_logo{width:162px}
}

@media screen and (max-width: 480px) {
	/*header*/
	.header{position:static}
	.mobile_menu{top:40px}


	/*main*/
	.main_slider .main_slider_inner{height:450px}
	.main_slider .main_slider_inner.slider1{background-position-y:0}
	.main_slider .main_slider_inner.slider2{background-position-y:0}
	.main_slider .main_slider_inner.slider3{background-position-y:0}
	.main_slider .main_slider_inner > div div h2{font-size:6vw}
	.main_slider .main_slider_inner > div div p{font-size:14px}
	.main_slider .main_slider_inner > div div p .m_block{display:block}

	.portfolio{padding:50px 0 35px}
	.portfolio h2{font-size:24px}
	.portfolio .tab_title{padding-top:0}
	.portfolio .tab_title li{width:90px}

	.portfolio_content{padding-bottom:50px; background-position:0 70px}
	.portfolio_content .tab-content .portfolio_slider .slick-prev{left:2px}
	.portfolio_content .tab-content .portfolio_slider .slick-next{right:2px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div{padding:30px 0 0}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div h3{font-size:20px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div p{font-size:13px}
	.portfolio_content .tab-content .portfolio_slider .portfolio_slider_inner > div div + div button{width:120px; font-size:13px}

	.custom_notice{padding:50px 0}
	.custom_notice .custom_notice_wrap > div h3{font-size:20px}
	.custom_notice .custom_notice_wrap > div ul li{padding:12px 0}
	.custom_notice .custom_notice_wrap > div ul li a span{font-size:13px}
	.custom_notice .custom_notice_wrap > div ul li a span + span{font-size:12px}

	.midascm{padding:50px 0}
	.midascm .midascm_wrap > div h3{font-size:20px}
	.midascm .midascm_wrap > div p{font-size:13px}
	.midascm .midascm_wrap > div button{width:120px; font-size:13px}

	.location{padding:50px 0 30px}
	.location h2{font-size:24px; padding-bottom:20px}
	.location ul{flex-wrap:wrap}
	.location ul li{width:50%}
	.location ul li + li + li{padding-top:30px}

	#daumRoughmapContainer1609902126428{height:300px}
	#daumRoughmapContainer1609902126428 .wrap_map{height:270px!important}

	.logos{padding:50px 0 35px}
	.logos h2{font-size:24px}
	.logos_btn{padding:15px 0}
	.logos_btn ul li{padding:0 15px}

	/*main popup*/
	#hd_pops_1{width:100%!important; left:0!important; top:0!important}
	#hd_pops_1 .hd_pops_con{width:100%!important; height:auto!important}

	#hd_pops_2{width:100%!important; left:0!important; top:0!important}
	#hd_pops_2 .hd_pops_con{width:100%!important; height:auto!important}

	/*footer*/
	.footer .f_logo{margin:0 auto 20px}
	.footer p{font-size:13px; word-break:keep-all}
	.footer p span{display:block; font-size:0; height:0}

	#top-button{bottom:15px; right:15px}
}

@media screen and (max-width: 320px) {
	.portfolio h2{font-size:22px}
	.portfolio .tab_title li + li{margin-left:5px}
}