@charset "utf-8";
@import url('font-awesome.min.css'); /* 폰트어썸 */


/* 폰트옵션 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* NotoSansKR */
@font-face {
	font-family: 'NotoSansKR';
	font-style: normal;
	font-weight: 400;
	src: local('NotoSansKR-Regular');
	src: url('../fonts/NotoSans-Regular.eot');
	src: url('../fonts/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
	url('../fonts/NotoSans-Regular.woff') format('woff'),
	url('../fonts/NotoSans-Regular.otf') format('truetype');
}
@font-face {
	font-family: 'NotoSansKR';
	font-style: normal;
	font-weight: 500;
	src: local('NotoSansKR-Medium');
	src: url('../fonts/NotoSans-Medium.eot');
	src: url('../fonts/NotoSans-Medium.eot?#iefix') format('embedded-opentype'),
	url('../fonts/NotoSans-Medium.woff') format('woff'),
	url('../fonts/NotoSans-Medium.otf') format('truetype');
}
@font-face {
	font-family: 'NotoSansKR';
	font-style: normal;
	font-weight: 700;
	src: local('NotoSansKR-Bold');
	src: url('../fonts/NotoSans-Bold.eot');
	src: url('../fonts/NotoSans-Bold.eot?#iefix') format('embedded-opentype'),
	url('../fonts/NotoSans-Bold.woff') format('woff'),
	url('../fonts/NotoSans-Bold.otf') format('truetype');
}



/* 공통레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
body#mainNew {font-family:"NotoSansKR", "Malgun Gothic", Dotum, Arial, sans-serif; background:#fff;}
body,input,textarea,select,button,table,th,h1,h2,h3,h4,h5,h6 {font-family:"Malgun Gothic","���� ���",Dotum,Arial,sans-serif;}

#mainWrap {width:100%; min-width:1400px; overflow:hidden;}
#mainWrap *, #mainWrap *::before, #mainWrap *::after {box-sizing:border-box;}
.inner_wrapper {max-width:1400px; margin:0 auto;} /* 내부넓이 */



/* 메인콘텐츠 레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 바로가기 이미지-자가판정, 전문판정, 수출허가 */
.main_visual {width:100%; padding:60px 0; background:#fff;}
.main_visual .inner_wrapper {display:flex; justify-content:space-between; align-items:center; gap:40px;}
.main_visual .inner_wrapper .visual_items {position:relative; flex:1; width:100%; max-width:440px; height:400px; padding:50px; box-shadow:rgba(0,0,0,0.1) 0 0 20px; transition:all 0.3s ease-in-out;}
.main_visual .inner_wrapper .visual_items.items01 {background:url(../images/main/main_visual_bg01.png) right bottom no-repeat, linear-gradient(120deg, #fff, #e0e3f3); background-size:contain;}
.main_visual .inner_wrapper .visual_items.items02 {background:url(../images/main/main_visual_bg02.png) right bottom no-repeat, linear-gradient(120deg, #fff, #e0e3f3); background-size:contain;}
.main_visual .inner_wrapper .visual_items.items03 {background:url(../images/main/main_visual_bg03.png) right bottom no-repeat, linear-gradient(120deg, #fff, #e0e3f3); background-size:contain;}
.main_visual .inner_wrapper .visual_items > dl dt {font-size:30px; line-height:1.4; font-weight:bold; color:#222;}
.main_visual .inner_wrapper .visual_items > dl dd {font-size:18px; line-height:1.3; letter-spacing:-0.5px; color:#222; margin-top:20px;}
.main_visual .inner_wrapper .visual_items .items_hover {
	position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; padding:50px; display:flex; flex-direction:column; 
	justify-content:center; align-items:center; background:rgba(34, 34, 34, 0.7); opacity:0; transition:all 0.3s ease-in-out;
}
.main_visual .inner_wrapper .visual_items:hover .items_define {opacity:0;} /* hover될 때, 설명영역 나타나지 않도록 */
.main_visual .inner_wrapper .visual_items:hover .items_hover {opacity:1;} /* hover될 때, 버튼영역 나타나도록 */
.main_visual .inner_wrapper .visual_items.hover .items_define {opacity:0;} /* 탭 focus될 때, 설명영역 나타나지 않도록 */
.main_visual .inner_wrapper .visual_items.hover .items_hover {opacity:1;} /* 탭 focus될 때, 버튼영역 나타나도록 */
.main_visual .inner_wrapper .visual_items .items_hover h2 {font-family:"NotoSansKR"; font-size:30px; line-height:1.4; font-weight:bold; color:#fff; margin-bottom:30px;}
.main_visual .inner_wrapper .visual_items .items_hover div a {
	width:300px; height:60px; display:flex; justify-content:center; align-items:center; font-size:18px;
	padding:10px; color:#fff; border-radius:40px; border:1px solid #fff; background:transparent; transition:all 0.3s ease-in-out;
}
.main_visual .inner_wrapper .visual_items .items_hover div a + a {margin-top:15px;}
.main_visual .inner_wrapper .visual_items .items_hover div a:hover {border-color:#495ec7; background:#495ec7;}
.main_visual .inner_wrapper .visual_items .items_hover div a:focus {outline-color:#fff;}


/* 로그인영역 */
.main_login {width:100%; padding-bottom:60px; background:#fff;}
.form_box {align-items:center; padding:30px 50px; background:#f3f5fc;}
.form_box h2 {font-family:"NotoSansKR"; font-size:24px; line-height:1.4; font-weight:bold; color:#222;}

.login_form_box {display:flex; justify-content:space-between; gap:100px;} /* 비로그인상태 */
.login_form_box .login_info h2 {margin-bottom:10px;}
.login_form_box .login_info div {display:flex; align-items:center; gap:20px;}
.login_form_box .login_info div a {position:relative; font-size:15px; color:#727272; transition:all 0.3s ease-in-out;}
.login_form_box .login_info div a::after {content:""; display:block; position:absolute; right:-10px; top:6px; width:1px; height:10px; background:rgba(114,114,114,0.7);}
.login_form_box .login_info div a:last-child::after {display:none;}
.login_form_box .login_info div a:hover {color:#2861c6;}
.login_form_box form {flex:1;}
.login_form_box .certificate_check {font-size:18px; letter-spacing:-1px; color:#727272; margin-bottom:15px;}
.login_form_box .certificate_check input[type="checkbox"] {
	position:relative; width:18px; height:18px; margin:-2px 4px 0 0; border:2px solid #aaa; outline:none; 
	border-radius:5px; background:#fff; appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.login_form_box .certificate_check input[type="checkbox"]:focus-visible {outline:dashed; outline-color:#222;}
.login_form_box .certificate_check input[type="checkbox"]::-ms-expand {display:none; appearance:none;}
.login_form_box .certificate_check input[type="checkbox"]:before {content:""; display:block; position:absolute; left:5.5px; top:1px; width:5px; height:10px; border:solid #aaa; border-width:0 3px 3px 0; transform:rotate(45deg);}
.login_form_box .certificate_check input[type="checkbox"]:disabled {border:2px solid #aaa; background:#aaa;}
.login_form_box .certificate_check input[type="checkbox"]:disabled:before {border-color:#fff;}
.login_form_box .certificate_check input[type="checkbox"]:checked {border:2px solid #495ec7; background:#495ec7;}
.login_form_box .certificate_check input[type="checkbox"]:checked:before {border-color:#fff;}
.login_form_box .login_form {display:grid; grid-template-columns:2fr 2fr 1fr; gap:20px;}
.login_form_box .login_form > * {flex:1; height:60px; border-radius:10px;}
.login_form_box .login_form input {max-width:320px; font-family:"NotoSansKR"; font-size:16px; color:#555; padding:0 20px; border:1px solid #ccc; background:#fff; outline:none;}
.login_form_box .login_form input::placeholder {color:#999;}
.login_form_box .login_form a {display:flex; justify-content:center; align-items:center; text-align:center; font-size:16px; font-weight:bold; color:#fff; background:#495ec7;}

.logout_form_box {display:grid; grid-template-columns:3fr 1fr 1fr 1fr; gap:20px;} /* 로그인상태 */
.logout_form_box h2 {margin-right:100px;}
.logout_form_box h2 strong {color:#495ec7;}
.logout_form_box a {height:60px; display:flex; justify-content:center; align-items:center; text-align:center; font-size:16px; font-weight:bold; color:#fff; border-radius:10px; background:#495ec7;}
.logout_form_box a.btns_after01 {background:#093779;}
.logout_form_box a.btns_after02 {background:#2880ff;}
.logout_form_box a.btns_after03 {background:#2861c6;}




/* 배너영역-검색-자주찾는서비스 ==================== */
.main_cont_top {position:relative; width:100%; overflow:hidden;}
.main_cont_top::before {
	content:""; display:block; position:absolute; right:0; z-index:-1; width:75%; min-width:1400px; height:100%; border-radius:50px 0 0 50px; 
	background:url('../images/main/main_cont_bg.png') right center no-repeat, linear-gradient(120deg, #3884b5, #495ec7, #282265); background-size:cover;
}
.main_cont_top .inner_wrapper {display:flex; justify-content:space-between; gap:20px; padding:60px 0;}
.main_cont_top .top_cont_left {width:calc(100% - 600px);}

/* 팝업영역 */
.main_popup {position:relative; width:100%; height:100%; background:#fff;}
.main_popup .popup_slide {width:100%; overflow:hidden;}
.main_popup .popup_slide .popup_box span {float:left; margin:0;}
.main_popup .popup_slide .popup_box a {display:block; width:100%; height:100%; overflow:hidden; outline:none;}
.main_popup .popup_slide .popup_box a img {width:100%; height:100%; object-fit:cover; overflow:hidden;}
.main_popup .popup_btns {position:absolute; left:-30px; top:50%; display:flex; flex-direction:column; gap:20px; transform:translateY(-50%);}
.main_popup .popup_btns > * {
	width:60px; height:60px; display:flex; justify-content:center; align-items:center; text-align:center; 
	border-radius:50%; border:none; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.2); transition:all 0.3s ease-in-out;
}
.main_popup .popup_btns i {font-size:16px; color:#afbac9;}
.main_popup .popup_btns button:hover {background:#df4c27;}
.main_popup .popup_btns button:hover i {color:#fff;}

/* 검색영역 */
.main_search {margin-bottom:50px;}
.main_search form {display:grid; grid-template-columns:1fr 80px; overflow:hidden;}
.main_search .search_input {height:80px; font-family:"NotoSansKR"; font-size:16px; color:#555; padding:0 20px; border:none; background:#fff; outline:none;}
.main_search .search_input::placeholder {color:#999;}
.main_search .search_btn {display:flex; justify-content:center; align-items:center; width:80px; height:80px; font-size:28px; color:#fff; text-align:center; border:none; background:#df4c27; cursor:pointer;}
.main_search .search_btn:focus {outline-offset:-2px; outline-color:#fff;}

/* 자주찾는서비스 */
.main_service ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.main_service ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:20px; width:130px; height:170px; padding:10px; background:#fff; transition:all 0.3s ease-in-out;}
.main_service ul li a img {height:50px; transition:all 0.3s ease-in-out;}
.main_service ul li a span {font-size:16px; letter-spacing:-0.5px; line-height:1.3; color:#222;}
.main_service ul li a:focus {outline-color:#fff;}
.main_service ul li a:hover {box-shadow:0 0 20px rgba(0,0,0,0.5);}
.main_service ul li a:hover img {transform:translateY(-3px);}
.main_service ul li:nth-child(8) a {gap:10px;}


/* 설치/안내-공지사항-빠른서비스 ==================== */
.main_cont_btm {width:100%; padding:100px 0 80px 0; background:#fff; overflow:hidden;}
.main_cont_btm .btm_cont_wrap {display:grid; grid-template-columns:370px 1fr; gap:50px; margin-bottom:60px; overflow:hidden;}

/* 안내 및 설치 */
.main_info {border:1px solid #ccc; background:#fff;}
.main_info > h2 {
	width:max-content; height:40px; display:inline-flex; justify-content:center; align-items:center; text-align:center; 
	font-family:"NotoSansKR"; font-size:18px; font-weight:bold; color:#fff; padding:8px 25px; border-radius:0 0 20px 0; background:#2861c6;
}
.main_info > ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; padding:25px;}
.main_info > ul li a {width:100%; height:115px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; text-align:center; padding:15px; background:#f4f8fd; transition:all 0.3s ease-in-out;}
.main_info > ul li a img {height:40px;}
.main_info > ul li a span {font-size:15px; color:#222;}
.main_info > ul li a:hover span {font-weight:bold;}

/* 공지사항 */
.main_notice{position:relative}
.main_notice .notice_title {display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
.main_notice .notice_title h2 {font-family:"NotoSansKR"; font-size:24px; line-height:1.4; font-weight:bold; color:#222;}
.main_notice .view_more {position:absolute;right:0;top:0; font-size:15px; color:#fff; padding:11px 20px; border-radius:20px; background:#2861c6;}
.main_notice .view_more:focus {outline-offset: -3px;outline-color: #fff;}
.main_notice .notice_list {max-height:280px; padding:20px 30px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.main_notice .notice_list li {position:relative; display:flex; justify-content:space-between; align-items:center; gap:0 30px; padding:15px 0 15px 20px;}
.main_notice .notice_list li::after {content:""; display:block; position:absolute; left:0; top:22px; width:5px; height:5px; border-radius:50%; background:#2861c6;}
.main_notice .notice_list li a {width:80%; display:block; font-size:16px; color:#555; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.main_notice .notice_list li a:hover {font-weight:bold; color:#333;}
.main_notice .notice_list li span {font-size:15px; letter-spacing:0; color:#999;}

/* 빠른서비스 */
.main_quick {display:flex; justify-content:space-between; align-items:center; gap:40px;}
.main_quick button {width:20px; display:flex; justify-content:center; align-items:center; text-align:center; border:none; background:none; cursor:pointer; }
.main_quick button i {font-size:30px; color:#afbac9;}
.main_quick .quick_slide {flex:1; width:1280px; overflow:hidden;}
.main_quick .quick_slide .fast_quick span {float:left; margin:0;}
.main_quick .quick_slide .fast_quick a {width:160px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:15px; text-align:center;}
.main_quick .quick_slide .fast_quick a:focus {outline-offset:-2px;}
.main_quick .quick_slide .fast_quick a img {height:40px;}
.main_quick .quick_slide .fast_quick strong {height:42px; display:flex; justify-content:center; align-items:center; font-size:16px; font-weight:normal; line-height:1.3; color:#333;}
.main_quick .quick_slide .fast_quick a:hover strong {font-weight:bold;}