@charset "utf-8";

/* skip 
=============================================================== */
.skip_nav { 
	& a { 
		position: absolute; top: -30px; left: 0; width: 100%; height: 30px; 
		text-align: center; line-height: 30px; color: var(--hl-white); font-size: 1.2rem; padding: 0 6px; background: #000; z-index: 100;
		&:focus,
		&:active { border: 0; top: 0;}
	}
}

/* 퀵메뉴
=============================================================== */
.sns_area { 
	position: fixed; top: 50%; right: 0; display: flex; flex-direction: column; align-items: center; transform: translateY(-50%); z-index: 100; 
	> .flex { display: flex; flex-direction: column; gap: 15px; padding: 10px; border-radius: 6px; background: var(--hl-white); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}
	> .flex > a { display: block; width: 70px; transition: all 0.3s; }
	> .flex > a:not(:last-of-type) > span { display: block; text-align: center; font-size: 1.2rem; letter-spacing: -2px; margin-top: 50px; }
	> .flex > a:nth-of-type(1) { background: url('../img/right_menu_01_n.png') top center no-repeat; }
	> .flex > a:nth-of-type(2) { background: url('../img/right_menu_02_n.png') top center no-repeat; }
	> .flex > a:nth-of-type(3) { background: url('../img/right_menu_03_n.png') top center no-repeat; }
	> .flex > a:nth-of-type(4) { background: url('../img/right_menu_04_n.png') top center no-repeat; }
	> .flex > a:nth-of-type(1):hover { background: url('../img/right_menu_01_h.png') top center no-repeat; }
	> .flex > a:nth-of-type(2):hover { background: url('../img/right_menu_02_h.png') top center no-repeat; }
	> .flex > a:nth-of-type(3):hover { background: url('../img/right_menu_03_h.png') top center no-repeat; }
	> .flex > a:nth-of-type(4):hover { background: url('../img/right_menu_04_h.png') top center no-repeat; }
	.sns_list { display: block; width: 100%; text-align: center; font-size: 1.4rem; border-radius: 4px; padding: 5px 0; background: var(--hl-icegray-10); transition: all 0.3s; }
	.sns_list:hover { color: var(--hl-white); background: var(--hl-icegray-40); }
	.button_con { position: absolute; top: 10px; left: -50px; border-radius: 6px 0 0 6px; background: var(--hl-primary); z-index: 90;}
	.button_con > button { position: relative; display: flex; align-items: flex-start; font-size: 1.4rem; width: 50px; height: 50px; padding: 5px; color: var(--hl-white); }
	.button_con > .sns_close::after { position: absolute; display: flex; content: ''; bottom: 15px; left: 50%; transform: translate(-50%); width: 14px; height: 2px; background: #fff; margin: 5px auto 0 auto; }
	.button_con > .sns_open::after {  position: absolute; display: flex; content: ''; bottom: 15px; left: 50%; transform: translate(-50%); width: 14px; height: 2px; background: #fff; margin: 5px auto 0 auto; }
	.button_con > .sns_open::before { position: absolute; display: flex; content: ''; bottom: 9px; left: 50%; transform: translate(-50%); width: 2px; height: 14px; background: #fff; margin: 5px auto 0 auto; }
}
@media screen and (max-width:1024px) {
	.sns_area { display: none; }
}

/* Header 
=============================================================== */
.wrap { position: relative; min-height: 100%; }
.header { position: relative; width: 100%; margin:0 auto; z-index: 90; 
	.gnb_body { 
		background: #fff; border-bottom: 1px solid #d9e3ef; 
		.gnb_top { display: flex; align-items: center; height: 80px; background: #fff; }
		.gnb_top .flex_left { width: 80%; display: flex; align-items: center; }
		.gnb_top .flex_left .logo a { display: flex; align-items: center; gap: 20px; height: 80px; padding: 12px; margin-left: 40px; }
		.gnb_top .flex_left .logo a img:nth-of-type(1) { width: 270px; height: 32px; }
		.gnb_top .flex_left .logo a img:nth-of-type(2) { width: 144px; height: 56px; }
		.gnb_top .flex_right { width: 20%; gap: 10px; margin-right: 50px; display: flex; justify-content: flex-end;align-items: center; }
		.gnb_top .flex_right .btn_site {
			padding: 5px 10px;border-radius: 5px; transition: all 0.3s;
			&:hover { color: #fff; background: var(--hl-primary); text-decoration: underline; }
		}
		.gnb { 
			width: 100%; height: 69px; margin: 0 auto; border-top: 1px solid #d9e3ef;  
			> ul { display: flex; flex-direction: row; justify-content: center; }
			> ul > li {	position: relative; width: 25%; text-align: center; }
			> ul > li:nth-of-type(3) > a { letter-spacing: -2px; }
			> ul > li > a {
				position: relative; display: block; height: 69px; font-size: 2.0rem; font-weight: 600; padding: 19px 0; 
				&:hover { color: var(--hl-primary); }
				&:focus { outline: 2px solid var(--hl-primary); }
			}
		}
		/* 메인 - 2depth */
		.gnb_view { 
			position: relative; width: 100%; height: 160px; z-index: 20;
			&:hover { background: var(--hl-gray-5); }
			> ul { width: 100%; display: flex; flex-direction: column; }
			> ul > li { width: 100%; text-align: center; }
			> ul > li > a {
				display: flex; align-items: center; justify-content: center; width: 100%; height: 4.0rem; padding: 8px 10px; transition: all 0.3s;
				&:hover { color: #fff; background: var(--hl-primary); }
				&:focus { outline: 2px solid var(--hl-white); }
			}
		}
	}
	.gnb_view_div { position: absolute; top: 150px; left: 0; width: 100%; height: 160px; 
		background: var(--hl-white); -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.2); box-shadow: 0 10px 10px rgba(0,0,0,0.2); z-index:10; 
	}
	.menu,.sidr { display:none; }
	.header_m { display: none; }

	@media screen and (max-width:1024px) {
		.gnb_body { display: none; }
		.header_m { display: block; position: fixed; top: 0; left: 0; width: 100%; background: var(--hl-white); height: 65px; border-bottom: 1px solid #d9e3ef;}
		.header_m .logo a { display: flex; align-items: center; height: 65px; gap: 10px; padding: 15px; }
		.header_m .logo a img:nth-of-type(1) { width: 200px; height: 24px; }
		.header_m .logo a img:nth-of-type(2) { width: 100px; height: 39px; margin-top: 3px; }
		.header_m .menu { display: block; position: absolute; right: 0; top: 0; }
		.header_m .menu .side_top { display: flex; margin-top: 50px; }
		.header_m .menu .side_top > li { width: 50%; }
		.header_m .menu .side_top > li > .side_btn { width: 100%; padding: 10px; text-align: center; background: #f3f4fc; transition: all 0.3s; }
		.header_m .menu .side_top > li > .side_btn:active,
		.header_m .menu .side_top > li > .side_btn:focus { background: #526daa; color: #fff; box-shadow: none; }
		.header_m .menu .right_menu { display: inline-block; cursor:pointer; }
		.header_m .menu .right_menu:active { background: #f0f0f0; }
		.header_m .menu .menu_btn { display: block; padding: 20px; background:url('../img/mobile_menu.png') center center no-repeat; color:transparent; text-overflow: ellipsis; }
		.header_m .menu .close_btn { position: absolute; display: inline-block; right: 0; height: 50px; padding: 5px 20px; }
		.header_m .menu .close_btn img { display: inline-block; }
		.header_m .menu .sidr { display: block; position: fixed; top: 0; right: -320px; width: 320px; height: 100vh; overflow: auto; padding: 10px 20px; background: #fff; transition: all 0.3s; z-index: 999; }
		.header_m .menu .sidr.active { right: 0; }
		.header_m .menu .sidr .side_menu:first-of-type { margin-top: 50px; }
		.header_m .menu .sidr .side_title { position: relative; display: block; padding: 20px 10px 10px; border-bottom: 1px solid #526daa; font-size: 2.0rem; color: #526daa; }
		.header_m .menu .sidr .side_title::before { position: absolute; content: '+'; top: 0; right: 10px; margin-top: 16px; font-size: 26px; color: #526daa; transition: all 0.3s; }
		.header_m .menu .sidr .side_title.active::before { transform: rotate(-135deg); }
		.header_m .menu .sidr .side_list { display: none; }
		.header_m .menu .sidr .side_list li { line-height: 2.0; }
		.header_m .menu .sidr .side_list li a { display: block; width: 100%; margin-top: 5px; padding: 5px 5px 5px 10px ; border-radius: 10px; }
		.header_m .menu .sidr .side_list li:hover a,
		.header_m .menu .sidr .side_list li:active a { background: #526daa; color: #fff; }
	}
	@media all and (max-width:360px){
		.header_m .logo a img:nth-of-type(1) { width: 170px; height: 20px;}
		.header_m .logo a img:nth-of-type(2) { width: 80px; height: 31px; }
	}
}

/* 메인 팝업
=============================================================== */
.main_popup_01 { 
	position: fixed; border-radius: 10px; top: 82px; left: 30px; background: #fff; box-shadow: 0 10px 20px 4px rgba(0, 0, 0, 0.2); z-index: 1000;
	> .popup_top { padding: 10px; text-align: center; }
	> .popup_top img { object-fit: contain; width: 100%; }
	> .popup_bottom { display: flex; justify-content: flex-end; align-items: center; padding: 0 10px; background: #e0e0e0; border-radius: 0 0 10px 10px; min-height: 50px; }
	> .popup_bottom span { font-size: 1.5rem; }
	.skip {position: absolute; top: 0; left: 0; padding: 0; margin: 0; border: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; font: 0/0 Dotum;line-height: 0; display: none;}
	@media all and (max-width:600px) {
		width: 90%; left: 0; margin: 0 5%;
	}
}


/* 서브페이지 - menu
=============================================================== */
.snb_nav.fixed { position: fixed; left: 0; top: 0; width: 100%; transition: all 0.3s; -moz-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);box-shadow: 0 8px 15px rgba(0,0,0,0.15); z-index: 15; }
.snb_nav { 
	width: 100%; height: 45px; background: #f6faff; border-bottom: 1px solid #d9e3ef;  
	.snb_ul { display: flex; }
	.snb_ul > li { 
		position: relative; 
		.btn_home { display: flex; align-items: center; justify-content: center; width: 60px; height: 45px; border-right: 1px solid #e9e9e9; border-left: 1px solid #e9e9e9; text-indent: -100000px; }	
		.btn_home > img { width: 24px; height: 24px; }
		.snb_toggle { position: relative; display: block; min-width: 250px; padding: 0 30px 0 14px; line-height: 45px; text-align: left; border-right: 1px solid #e9e9e9; }
		.snb_toggle > img { position: absolute; right: 10px; top: calc(50% - 4px); width: 14px; height: 8px; }
		.layer { position: absolute; display: none; width: 100%; height: auto; top: 45px; left: -1px; min-width: 251px; border: 1px solid #e9e9e9; border-top: 0; background: var(--hl-white); z-index: 9; }
		.layer .list > li { 
			width: 100%; border-bottom: 1px solid #f2f2f2;
			&:last-child {border-bottom: none;}
		} 
		.layer .list .item > a, 
		.layer .list .item > a.link {
			display: block; padding: 13px 10px 13px 14px; font-size: 1.5rem; line-height: 20px; transition: all 0.3s;	
			&:hover { color: #526daa; color: var(--foot-color); background: #f7f7f7; }
		}
	}
	@media screen and (max-width:1024px) {
		margin-top: 65px;
		> .inner { padding: 0; }
	}
	@media screen and (max-width:560px) { 
		.snb_ul > li:nth-of-type(1) { display: none; }
		.snb_ul > li:nth-of-type(2) { width: 50%; }
		.snb_ul > li:nth-of-type(3) { width: 50%; }
		.snb_ul > li .snb_toggle { min-width: auto; font-size: 1.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
		.snb_ul > li .layer { min-width: auto; }
		.snb_ul > li .layer .list .item > a, 
		.layer .list .item > a.link { font-size: 1.3rem; }
	}
	@media screen and (max-width:400px) { 
		.snb_ul > li .snb_toggle { font-size: 1.2rem; }
	}
} 

/* site map 
=============================================================== */
.pop_sitemap { 
	display: none; position: absolute; top: 0; left: 0; width: 100%; height: 300px; padding: 20px; background: var(--hl-white); -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 10px rgba(0,0,0,0.3); z-index: 1000; 
	.flex { display: flex; justify-content: flex-end; }
	.flex > .site_close { cursor: pointer; }
	.flex > .site_close > img { display: block; width: 20px; height: 20px; margin: 10px; }
	> .sitemap {
		display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; width: 100%; margin: 0 auto;  
		> .side_menu > .side_title { padding: 15px 0; font-size: 2.0rem; font-weight: 600; border-bottom: 2px solid var(--hl-primary); }
		> .side_menu > .side_list > li { color: var(--hl-gray-70); background-size: 100%; }
		> .side_menu > .side_list > li > a { 
			display: block; padding: 6px 6px 3px 6px; background: var(--hl-white); transition: all 0.3s;	
			&:hover { color: var(--hl-white-fixe); background: var(--hl-primary); }
		}
	}
	@media screen and (max-width:1280px) {
		height: 650px;
	}
	@media screen and (max-width:1024px) {
		> .sitemap { display: none; }
	}
}


/* 주요서비스
=============================================================== */
.quick_menu {
	position: relative;
	.menu_list { 
		display: flex; justify-content: space-between; gap: 40px; align-items: flex-start;
	}
	.menu_list .item { position: relative; width: calc(100%/5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
	.menu_list .item .img_box { position: relative; display: flex; align-items: center; overflow-y: hidden; transition: all 0.3s; }
	.menu_list .item .img_box::after { position: absolute; content: ''; display: block; border-radius: 10px; transform: scale(0.1); transition: all 0.3s; }
	.menu_list .item .img_box:hover::after { width: 100%; height: 100%; transform: scale(1); background: rgba(0, 0, 0, 0.6); }
	.menu_list .item .img_box > img { border-radius: 10px; }
	.menu_list .item .img_box .blind_box { position: absolute; width: 100%; top: -30px; font-size: 1.8rem; color: var(--hl-white); transform: translate(0, 0); transition: all 0.5s; z-index: 10;}
	.menu_list .item .img_box:hover .blind_box { top: 50%; transform: translateY(-50%); visibility: visible; }
	.menu_list .item .txt_box { font-size: 1.8rem; font-weight: 500; line-height: 1.3; color: var(--hl-text); }

	@media screen and (max-width:1280px) {
		.menu_list { gap: 20px; }
	}
	@media screen and (max-width:800px) {
		.menu_list { flex-wrap: wrap; justify-content: center; }
		.menu_list .item { width: 30%; }
		.menu_list .item .txt_box { font-size: 1.6rem; }
	}
	
	@media screen and (max-width:450px) {
		.menu_list .item { width: calc(100%/2 - 10px); }
	}
}


/* 핵심기술 플랫폼 - 팝업 */
.main_menu_pop { 
	position: fixed; display: flex; justify-content: center; flex-direction: row; opacity: 0; top: 0; left: 0;  
	width: 100%; height: 100vh; align-items: center; z-index: -1; transition: all 0.3s;
	&::after { position: absolute; content: ''; display: block; top: 0; left: 0; width: 100%; height: 100vh; background:rgba(0, 0, 0, 0.7); }
	&.open { opacity: 1; z-index: 110; }
	.layer_box {
		display: flex; align-items: center; justify-content: flex-start; flex-direction: column; position: relative; z-index: 111; width: 40%; 
		border-radius: 10px; outline-color: transparent; transition: outline-color 0.1s; background: var(--hl-white); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
		> .layer_top { 
			display: flex; align-items: center; width: 100%; padding: 16px 20px; border-radius: 10px 10px 0 0; background: var(--hl-icegray-10);
			.tit { font-size: 2.2rem; }
		}
		> .layer_con { 
			display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; padding: 20px; gap: 20px; 
			> .left .top,
			> .right .top { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 15px 10px; font-size: 1.8rem; text-align: center; font-weight: bold; word-break: keep-all; }
			> .left  { display: flex; flex-direction: column; justify-content: space-between; border:1px solid #005bac; border-radius: 10px; overflow: hidden; }
			> .left > a { color: #fff; font-size: 2.0rem; padding: 10px; text-align: center; background: #005bac; transition: all 0.3s; }
			> .left > a:hover { background: #003c70; }
			> .left .top > img { max-width: 160px; width: 90%; }
			> .right  { display: flex; flex-direction: column; justify-content: flex-end; border:1px solid #ea6175; border-radius: 10px; overflow: hidden; }
			> .right .top > img { max-width: 270px; width: 90%; }
			> .right > a { color: #fff; font-size: 2.0rem; padding: 10px; text-align: center; background: #ea6175; transition: all 0.3s; }
			> .right > a:hover { background: #d6233e; }
			> .left > a:focus,
			> .right > a:focus { outline: 2px solid var(--hl-white); }
		}
		> .layer_bottom { display: flex; align-items: center; justify-content: flex-end; flex-direction: row; gap: 8px; width: 100%; padding: 20px;}
		> .btn_close { position: absolute; display: inline-block; top: 22px; right: 20px; width: 2.0rem; height: 2.0rem; background-size: 2rem; background: url('../img/icon_close_modal_b.svg') no-repeat center;}
		> .btn_close:focus { outline-offset: 2px; outline: 2px solid var(--hl-information); }
	}

	@media screen and (max-width:1024px) { 
		.layer_box { width: 80%; }
	}
	@media screen and (max-width:800px) { 
		.layer_box > .layer_con > .left > a,
		.layer_box > .layer_con > .right > a { font-size: 1.6rem; }
	}
	@media screen and (max-width:500px) { 
		.layer_box { width: 90%; }
		.layer_box > .layer_top .tit { font-size: 1.8rem; }
	}
}
/* 개별 팝업일 경우 
.main_menu_pop {
	position: absolute; display: flex; justify-content: flex-start; flex-direction: row; opacity: 0; top: 400px; left: 15%;  
	width: 70rem; margin: 0 auto; align-items: center; z-index: -1; transition: all 0.3s;
	&::after { position: absolute; content: ''; display: block; top: 0; left: 0; width: 100%; height: 100vh; background:#000; }
	&.open { top: 290px; opacity: 1; z-index: 50; }
	.layer_box {
		display: flex; align-items: center; justify-content: flex-start; flex-direction: column; position: relative; z-index: 100; width: 100%; 
		border-radius: 10px; outline-color: transparent; transition: outline-color 0.1s; background: var(--hl-white); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
		> .layer_top { 
			display: flex; align-items: center; width: 100%; padding: 16px 20px; border-radius: 10px 10px 0 0; background: var(--hl-icegray-10);
			.tit { font-size: 2.2rem; }
		}
		> .layer_con { 
			display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; padding: 20px; gap: 20px; 
			> .left .top,
			> .right .top { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 15px 10px; font-size: 1.8rem; text-align: center; font-weight: bold; word-break: keep-all; }
			> .left  { display: flex; flex-direction: column; justify-content: space-between; border:1px solid #005bac; border-radius: 10px; overflow: hidden; }
			> .left > a { color: #fff; font-size: 2.0rem; padding: 10px; text-align: center; background: #005bac; transition: all 0.3s; }
			> .left > a:hover { background: #003c70; }
			> .left .top > img { max-width: 160px; width: 90%; }
			> .right  { display: flex; flex-direction: column; justify-content: flex-end; border:1px solid #ea6175; border-radius: 10px; overflow: hidden; }
			> .right .top > img { max-width: 270px; width: 90%; }
			> .right > a { color: #fff; font-size: 2.0rem; padding: 10px; text-align: center; background: #ea6175; transition: all 0.3s; }
			> .right > a:hover { background: #d6233e; }
			> .left > a:focus,
			> .right > a:focus { outline: 2px solid var(--hl-white); }
		}
		> .layer_bottom { display: flex; align-items: center; justify-content: flex-end; flex-direction: row; gap: 8px; width: 100%; padding: 20px;}
		> .btn_close { position: absolute; display: inline-block; top: 22px; right: 20px; width: 2.0rem; height: 2.0rem; background-size: 2rem; background: url('../img/icon_close_modal_b.svg') no-repeat center;}
		> .btn_close:focus { outline-offset: 2px; outline: 2px solid var(--hl-information); }
	}
	@media screen and (max-width:1280px) { 
		left: 20px;
		&.open { top: 10%; }
	}
	@media screen and (max-width:800px) { 
		width: 90%; left: 0; top: 200px; margin: 0 5%;
		&.open { top: 160px; }
		.layer_box > .layer_con > .left > a,
		.layer_box > .layer_con > .right > a { font-size: 1.6rem; }
	}
	@media screen and (max-width:420px) { 
		&.open { top: 120px; }
		.layer_box > .layer_top .tit { font-size: 2.0rem; }
	}
} */



/* container 
------------------------------------------------------- */
.main_container { position: relative; width: 100%; }
.container { position: relative; width: 100%; min-height: 600px; padding-bottom: 70px; }
.inner { width: 1300px; margin: 0 auto; } 
.main_title { font-size: 3.0rem; font-weight: bold; }

/* 메인 슬라이드 */
.main_visual { position: relative; }
.carousel { position: relative; display: flex; width: 100%; height: 100%; min-height: 560px; overflow: hidden;  }
.carousel_item { 
	position: absolute; width: 100%; height: 100%;
	background-color: #555; visibility: visible; transition: 1.0s all linear; z-index: 0;
	display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0;
}

.carousel_item_info { 
	position: absolute; -webkit-order: 1; order: 1; left: 0; margin: auto 10%;
	display: flex; width: 80%; height: 100%; justify-content: center; flex-direction: column; z-index: 10;
}

.carousel_item_image {
	position: relative; width: 100%; height: 100%; opacity: 0.5;
	background-position: center; background-size: cover; /* transform: translateY(100%); */ transition: 1.0s all ease-in-out;
	flex-basis: 100%; align-self: flex-end; -webkit-order: 2; order: 2;
}

.carousel_item_title { font-size: 3.7rem; line-height: 45px; font-weight: 700; color: #fff; margin-bottom: 30px; word-break: keep-all; opacity: 0; visibility: hidden; transform: translateY(100px); transition: 0.6s all ease-in-out; transition-delay: 0.2s;}
.carousel_item_subtitle { font-size: 3.5rem; margin: 0; color: #b5fffb; font-weight: 500; opacity: 0; visibility: hidden; transform: translateY(120px); transition: 0.8s all ease-in-out; transition-delay: 0.3s;}
.carousel_item_description { font-size: 2.0rem; color: #b5fffb; margin-top: 10px; line-height: 22px; word-break: keep-all; opacity: 0; visibility: hidden; transform: translateY(150px); transition: 1.0s all ease-in-out; transition-delay: 0.4s;}
.carousel_item_1 .carousel_item_image{ height: 100%; background: url('../img/visual_1920_01.jpg') center center no-repeat; }
.carousel_item_2 .carousel_item_image{ height: 100%; background: url('../img/visual_1920_02.jpg') center center no-repeat; }
.carousel_item_3 .carousel_item_image{ height: 100%; background: url('../img/visual_1920_03.jpg') center center no-repeat; }
.carousel_item_4 .carousel_item_image{ height: 100%; background: url('../img/visual_1920_04.jpg') center center no-repeat; }
.carousel_item_5 .carousel_item_image{ height: 100%; background: url('../img/visual_1920_05.jpg') center center no-repeat; }
.carousel_item_6 .carousel_item_image{ height: 100%; background: url('../img/visual_1920_06.jpg') center center no-repeat; }

.carousel_controll { position: absolute; bottom: 0; left: 96px; color: #fff; z-index: 2; }
.carousel_controll .img_stop,
.carousel_controll .img_play { display: inline-block; padding: 14px 16px; width: 45px; height: 50px; background: rgba(255,255,255,0.3);  cursor: pointer; }
.carousel_controll .img_stop:hover, 
.carousel_controll .img_play:hover { background: rgba(0, 0, 0, 0.6); }

.carousel_nav { position: absolute; left: 0; bottom: 0; z-index: 2; background-color: #fff;}
.carousel_icon { display: inline-block; width: 16px; vertical-align: middle; fill: #5d5d5d; }
.carousel_arrow { position: relative; display: inline-block; height: 50px; padding: 11px 15px; cursor: pointer; vertical-align: middle; transition: all 0.3s; }

.carousel_arrow:nth-of-type(1) > img,
.carousel_arrow:nth-of-type(2) > img { transition: all 0.3s; }
.carousel_arrow:nth-of-type(1):hover > img { transform: translateX(-5px); }
.carousel_arrow:nth-of-type(2):hover > img { transform: translateX(5px); }
.carousel_arrow:nth-child(1):after{ position: absolute; content: ""; top: 50%; width: 1px; height: 14px; right: -3px; margin-top: -7px; background-color: #b0b0b0; }
.carousel_arrow:hover { background: #526daa; }

.ca_active { display: flex; visibility: visible; z-index: 1; }
.ca_active .carousel_item_subtitle,
.ca_active .carousel_item_title,
.ca_active .carousel_item_description,
.ca_active .carousel_item_btn { opacity: 1; visibility: visible; transform: translateY(0); transition: 1.0s all ease-in-out; }
.ca_active .carousel_item_image { opacity: 1; transition: 1.0s all ease-in-out; }

@media screen and (max-width:1280px) { 
	.carousel { width: 100%; min-height: 450px; }
}
@media screen and (max-width:800px) {
	.carousel { min-height: 300px; }
	.carousel_item_info { width: 100%; padding: 0 20px; margin: 0; }
	.carousel_item_title { font-size: 2.5rem; line-height: normal;}
	.carousel_item_subtitle { font-size: 1.8rem; }
	.carousel_item_description { font-size: 1.4rem; }
}

@media screen and (max-width:360px) {
	.carousel_item_title { font-size: 2.0rem; }
	.carousel_item_subtitle { font-size: 1.6rem; }
	.carousel_item_description { font-size: 1.2rem; }
	.title_area .main_title { padding: 20px 0; }
}


/* 메인 동영상
------------------------------------------------------- */
.visualRoll { 
	position:relative; left:0; width:100%; overflow: hidden; 
	.video_area { position:relative; left:0; height:auto; width: 100%; margin:0 auto; text-align: center;  }
	.video_area > video { position: relative; }
	.video_area > video:focus { outline: none; }
	.video_area .rollbtnArea { position:absolute; right:0; top:0; }
	@media screen and (min-width:1921px) { 
		.video_area .size_2544 { display: block; }
		.video_area .size_1920 { display: none; }
		.video_area .size_764  { display: none; } 
	}
	@media screen and (max-width:1920px) { 
		.video_area .size_2544 { display: none; }
		.video_area .size_1920 { display: block; }
		.video_area .size_764  { display: none; } 
	}
	@media screen and (max-width:764px) { 
		.video_area .size_2544 { display: none; }
		.video_area .size_1920 { display: none; }
		.video_area .size_764  { display: block; } 
	}
}


/* 메인 탭메뉴 - 공지사항 */
.main_box_area { padding: 70px 0;}
.main_box_area .tab_interface { display: flex; flex-direction: column; }
.main_box_area .tab_interface .tab_title { font-size: 2.6rem; font-weight: 700; color: #526daa; }
.main_box_area .tab_interface ul { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; }
.main_box_area .tab_interface .more_con { position: relative; text-align: right; height: 36px;}
.main_box_area .tab_interface > .tab_list [aria-selected='true'] { position: relative; color: #333; z-index: 1; }
.main_box_area .tab_interface .more_con > a { position: absolute; display: inline-block; width: 100px; top: 0; right: 0; padding: 6px 0; font-size: 1.8rem; border-radius: 20px; transition: all 0.3s; }
.main_box_area .tab_interface .more_con > a:active,
.main_box_area .tab_interface .more_con > a:hover { color: var(--hl-white); background: var(--hl-primary); padding-right: 25px; }

.main_box_area .tab_con { width: 100%; }
.main_box_area .tab_con .con_sec .flex {  display: flex; gap: 20px; }
.main_box_area .tab_con .con_sec .flex a { display: block; }
.main_box_area .tab_con .con_sec .flex .tab_box01 { position: relative; width: 24%; background: #fff; text-decoration: none; transition: all 0.3s;}
.main_box_area .tab_con .con_sec .flex .tab_box01::after { position: absolute; content: ''; display: block; width: 10px; height: 4px; top: 0; left: 0; opacity: 0; background: var(--hl-primary); transition: width 0.3s ease;}
.main_box_area .tab_con .con_sec .flex .tab_box01:hover::after { width: 100%; opacity: 1; }
.main_box_area .tab_con .con_sec .flex .tab_box01:hover { box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); transform: translateY(-10px);}
.main_box_area .tab_con .con_sec .flex .item_01 { display: flex; }
.main_box_area .tab_con .con_sec .flex .item_01 > .tit { display: inline-block; padding: 10px; color: #fff; background: #5c78e5;}
.main_box_area .tab_con .con_sec .flex .item_01 > .receipt { display: inline-block; padding: 10px;  background: #ccc;}
.main_box_area .tab_con .con_sec .flex .item_01 > .deadline{ display: inline-block; padding: 10px; color: #fff; background: #707070;}
.main_box_area .tab_con .con_sec .flex .item_01 > .new { display: inline-block; padding: 10px; color: #fff; background: #f74b73; }
.main_box_area .tab_con .con_sec .flex .item_02 { font-size: 1.8rem; max-width: 310px; max-height: 100px; min-height: 80px; margin: 16px;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.main_box_area .tab_con .con_sec .flex .item_03 { padding: 16px; text-align: right; color: #555; border-top: 1px dashed #ddd; }
.main_box_area .tab_con .con_sec .flex .item_04 { display: flex; justify-content: space-between; padding: 16px; color: #555; border-top: 1px dashed #ddd; }
.new_icon { display: inline-block; padding: 10px; color: #fff; background: var(--hl-primary); }

.unvisual { display: none; } 
@media screen and (max-width:1000px) {
	.main_box_area .tab_con .con_sec .flex { flex-wrap: wrap; }
	.main_box_area .tab_con .con_sec .flex .tab_box01 { width: calc(100%/2 - 10px); }
}

@media screen and (max-width:400px) {
	.main_box_area { padding: 40px 0; }
	.main_box_area .tab_con .con_sec .flex .tab_box01 { width: 100%; }
	.main_box_area .tab_con .con_sec .flex .item_02 { min-height: auto; }
}

/* footer - 개인정보처리방침, 인증마크 
=============================================================== */
.footer_area { 
	position: relative; top: 0; width: 100%; background: #3b3d49; z-index: 20; 

	.foot_top { height: 70px; background: #525565; }
	.foot_top .flex { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; }
	.foot_top .flex .flex_con { position: relative; width: 26%; box-shadow: 0 0 0 1px #cbcee2 inset; }
	.foot_top .flex .flex_tit { width: 16%; color: #cbcee2; }
	.foot_top .flex li:first-child { border: none; }
	.foot_top .flex li a { color:#cbcee2; }
	.foot_top .flex a.toggle { position: relative; display: block; padding: 13px 30px; background:url('../img/footer_arrow.png') no-repeat right 20px top 50%; text-align: left; font-weight: 400; text-decoration: none;  } 
	.foot_top .flex .foot_layer { position: absolute; bottom: 44px; width: 100%; background: #525565; border: 1px solid #cbcee2; border-bottom: none; height: auto; display: block; z-index: 20; } 
	.foot_top .flex .foot_layer > .flex_list > li { width: 100%; color: #cbcee2; } 
	.foot_top .flex .foot_layer > .flex_list > li:last-child { border-bottom: none; } 
	.foot_top .flex .foot_layer > .flex_list > .item > a, 
	.foot_top .flex .foot_layer > .flex_list > .item > a:link { display: block; padding: 6px 10px 6px 30px; color:#cbcee2; line-height: 20px; word-break: keep-all; } 
	.foot_top .flex .foot_layer > .flex_list > .item > a:hover { background: #525565; color: #3dbfd4; } 
	.foot_bottom .box { text-align: center; font-size: 1.3rem; color: #fff; }
	.foot_bottom .box .ie10_chrome { font-weight: 100; color: #a5a8be; color: var(--bg-color-gray3); margin-top: 3px; }
	.foot_bottom { display: flex; justify-content: space-between; align-items: center; height: 120px; font-size: 1.5rem; gap: 20px; }
	@media screen and (max-width:900px) {
		.foot_bottom { height: auto; padding: 30px 0;}
	}
	@media screen and (max-width:800px) {
		.foot_top .flex li:first-child { width: 30%; word-break: keep-all; }
		.foot_top .flex li:nth-of-type(3) { width: 70%; } 
		.foot_top .flex li:nth-of-type(2), 
		.foot_top .flex li:nth-of-type(4) { display: none; } 
	}
	@media screen and (max-width:600px) {
		.foot_con { flex-direction: column; }
		.foot_con .flex .foot_layer > .flex_list > .item > a:link { padding: 10px;}
	}
	@media screen and (max-width:360px) {
		.foot_top .flex a.toggle { padding: 13px 10px; }
		.foot_top .flex .foot_layer > .flex_list > .item > a, 
		.foot_top .flex .foot_layer > .flex_list > .item > a:link { padding: 10px; font-size: 1.4rem; }
	}
}


/* index_반응형
=============================================================== */
@media all and (max-width:1280px){
    .inner { width: 100%; padding: 0 20px; }
	.sub_nav .inner { padding: 0;}
}

@media all and (max-width:1024px){
	.main_container { padding-top: 65px; }
    .bg_cover { position: fixed; top: 0; right: 0; width: 100%; height: 100%; visibility: hidden; background: rgba(0, 0, 0, 0.8); opacity: 0; transition: all 0.3s; z-index: 100; }
	.bg_cover.active { opacity: 1; right: 320px; visibility: visible; }
}