@charset "utf-8";

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 공통 - UI 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
body {background-color:#fff;}
#wrapper {background-repeat:no-repeat; background-position:center top; box-sizing: border-box;}
.base_width {margin:0 auto; width:1300px; box-sizing:border-box; position:relative;}

.header_pos {width:100%; min-width:320px; position:relative; z-index:101; position:absolute; top:0; left:0;}

/* 헤더 탑 영역/////////////////////////////////////////////////////// */
.header_top {}
.header_top .base_width {display:flex; padding:0 10px; box-sizing:border-box; height:70px; justify-content:space-between; align-items:center;}
.header_top .main_slogan {font-weight:600;}
.header_top .main_slogan .title {font-size:22px; color:#333; letter-spacing:-1px;}
.header_top .main_slogan .title strong {color:#cc0000;}
.header_top .main_slogan .lead_txt {font-size:13px; color:#666666;}

.header_top .utilmenu {}
.header_pos .header_top .utilmenu a.btn_login {color:#fff;}
.header_pos .header_top .utilmenu span.username {color:#fff;}
.header_pos .header_top .utilmenu a.btn_logout {display:inline-block; margin-left:10px; padding:0 10px; height:22px; line-height:22px; font-size:14px; color:#fff; border-radius:20px; border:solid 1px rgba(255, 255, 255, 0.8);}
.header_pos .header_top .utilmenu a.btn_logout:hover {border:solid 1px #fff;}

.header_pos.main .header_top .utilmenu a.btn_login {color:#666;}
.header_pos.main .header_top .utilmenu span.username {color:#666;}
.header_pos.main .header_top .utilmenu a.btn_logout {color:#666; border:solid 1px rgba(0, 0, 0, 0.3);}
.header_pos.main .header_top .utilmenu a.btn_logout:hover {border:solid 1px #666;}

/* 데스크탑 */
@media all and (max-width:1300px){      
      .base_width {width:auto;}
      .header_top .base_width {margin:0 10px; padding:0 10px; width:auto; box-sizing: border-box;}
}
/* 모바일 */
@media all and (max-width:640px){
	.header_top .base_width {height:initial;}
	.header_top .main_slogan {padding:10px 0;}
	.header_top .main_slogan .title {font-size:16px;}
	.header_top .main_slogan .lead_txt {font-size:10px;}

	.utilmenu {display:none;}
}

/* 헤더 바디 영역/////////////////////////////////////////////////////// */
.header .base_width {display:flex; justify-content:space-between; align-items:center; box-sizing:border-box; padding:0 20px; height:90px; background-color:#fff; border-radius:15px; position:relative;
	box-shadow:3px 3px 15px 3px rgba(0,0,0,0.05);}

h1.logo {cursor:pointer;}
h1.logo img {}

/* 데스크탑 */
@media all and (max-width:1300px){
	.header .base_width {margin:0 10px;}
}

/* 태블릿 */
@media all and (max-width:1024px){

}
@media all and (max-width:768px){
}

/* 모바일 */
@media all and (max-width:640px){
	.header .base_width {height:60px; border-radius:10px;}
	h1.logo img {height:20px;}
}


/* 대메뉴 */
.gnbarea {float:right;}
.gnbarea ul.gnb {height:90px;}
.gnbarea ul.gnb>li {float:left; position:relative;}
.gnbarea ul.gnb>li a.title {display:block; padding:0 20px; height:90px; line-height:90px; color:#333; font-size:19px; font-weight:600; position:relative;}
.gnbarea ul.gnb>li a.title:hover, 
.gnbarea ul.gnb>li a.title.active {color:#0099ff;}

.gnbarea ul.gnb>li::after {display:block; content:''; width:0%; border-bottom:solid 3px #0099ff; transition: 0.5s;
	position:absolute; bottom:0; left:50%; z-index:0;}
.gnbarea ul.gnb>li:hover::after {width:100%; left:calc(50% - 50%);}
.gnbarea ul.gnb>li:hover a.title {color:#0099ff;}
.gnbarea ul.gnb>li.active::after {display:block; content:''; left:0; width:100%; border-bottom:solid 3px #0099ff;}
.gnbarea ul.gnb>li.active a.title {color:#0099ff;}

.gnbarea ul.gnb>li.search_li a.btn_search {display:block; padding:0 10px; height:90px; line-height:90px; color:#666666; font-size:19px;}
.gnbarea ul.gnb>li.search_li a.btn_search:hover {color:#000;}
.gnbarea ul.gnb>li.totalmenu_li a.btn_totalmenu {display:block; padding:0 10px; height:90px; line-height:90px; color:#666666; font-size:19px;}
.gnbarea ul.gnb>li.totalmenu_li a.btn_totalmenu:hover {color:#000;}

.gnbarea ul.gnb>li.search_li::after,
.gnbarea ul.gnb>li.totalmenu_li::after {display:none;}


@media all and (max-width:1300px){
}

.gnbarea ul.gnb>li .submenu {display:none; padding-top:20px; width:170px; position:absolute; top:80px; left:0; z-index: 1;}
.gnbarea ul.gnb>li:hover .submenu {display:block;}

.gnbarea ul.gnb>li .submenu>ul {background-color:#fff; border-radius:10px; overflow:hidden; box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.2);}
.gnbarea ul.gnb>li .submenu>ul>li {position:relative;}
.gnbarea ul.gnb>li .submenu>ul>li>a {display:block; padding:15px 20px; color:#333; font-weight:600; background-color:#fff; border-top:solid 1px #ddd; transition: 0.3s ease; position:relative;}
.gnbarea ul.gnb>li .submenu>ul>li:first-child>a {border-top:none;}
.gnbarea ul.gnb>li .submenu>ul>li>a:hover,
.gnbarea ul.gnb>li .submenu>ul>li>a.active {color:#fff; background-color:#0099ff;}
.gnbarea ul.gnb>li .submenu>ul>li>a i {font-size:10px; color:#999; transform: rotate(0deg); transition: all 0.3s ease-out; position:absolute; top:calc(50% - 7px); right:20px;}
.gnbarea ul.gnb>li .submenu>ul>li>a:hover i {color:#fff;}
.gnbarea ul.gnb>li .submenu>ul>li>a.active i {color:#fff; transform: rotate(180deg);}

.gnbarea ul.gnb>li .submenu_depth3 {padding:10px; background-color:#f2f2f2; border-radius:5px;}
.gnbarea ul.gnb>li .submenu_depth3>ul {}
.gnbarea ul.gnb>li .submenu_depth3>ul>li>a {display:block; padding:0 20px 0 30px; height:30px; line-height:30px; color:#333; font-weight:600; border-top:solid 1px #eee; position:relative;}
.gnbarea ul.gnb>li .submenu_depth3>ul>li>a:after {display:block; content:'·'; color:#333; position:absolute; left:15px; top:0;}
.gnbarea ul.gnb>li .submenu_depth3>ul>li:first-child>a {border-top:none;}
.gnbarea ul.gnb>li .submenu_depth3>ul>li>a:hover,
.gnbarea ul.gnb>li .submenu_depth3>ul>li>a.active {color:#0099ff;}
.gnbarea ul.gnb>li .submenu_depth3>ul>li>a.active:after {display:block; content:'-'; color:#000; position:absolute; left:15px; top:0;}

/* 전체메뉴 ///////////////////////////////////////////////////*/
.totalmenu_box {padding:50px; box-sizing:border-box; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1000; background-color:#fff;;
	-webkit-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
	-moz-box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
	box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.40);
	overflow-y:auto;
}

.menu_title {line-height:1.2; box-sizing:border-box; text-align:center; border-bottom:solid 1px #ddd; background-color: #fff; position:relative;}
.menu_title strong {display:block; margin-bottom:5px; font-size:45px; letter-spacing:-1px; color:#1e5ca8;}
.menu_title span {display:block; font-size:15px; color:#999; 
	word-break:keep-all;
	white-space:-moz-pre-wrap;
	white-space:-pre-wrap;
	white-space:-o-pre-wrap;
	word-wrap:break-word;}

a.btn_totalmenu_close {position:absolute; right:100px; top:50px;}
a.btn_totalmenu_close i {font-size:30px; color:#999;}
a.btn_totalmenu_close:hover i {color:#1e5ca8; transition: all 0.1s;}

ul.totalmenu_list {margin:0 auto; padding-top:50px; width:80%; box-sizing:border-box;}
ul.totalmenu_list>li {float:left; padding-left:20px; margin-bottom:50px; width:16.66%; box-sizing:border-box;}
ul.totalmenu_list>li .outline {height:250px;}
ul.totalmenu_list>li .title {padding:10px; text-align:center; background-color:#014099; border-radius:0 10px 0 10px;}
ul.totalmenu_list>li .title strong {font-weight:600; font-size:20px; color:#fff;}

ul.submenulist {padding:10px 0;}
ul.submenulist>li {padding:5px 10px;}
ul.submenulist>li>a {padding-left:15px; font-size:16px; color:#333; position:relative;}
ul.submenulist>li>a:after {content: '·'; display:block; font-size:20px; position:absolute; top:-3px; left:0;}
ul.submenulist>li>a:hover {color:#1e5ca8; font-weight:600;}

.menu_depth3 ol {padding:10px 0;}
.menu_depth3 ol li {padding:5px 10px;}
.menu_depth3 ol li>a {padding-left:20px; font-size:16px; color:#999; position:relative;}
.menu_depth3 ol li>a:after {content: '·'; display:block; font-size:20px; position:absolute; top:-3px; left:0;}
.menu_depth3 ol li>a:hover {color:#1e5ca8;}

.btn_sidemenu {display:none;}

@media all and (max-width:1800px){
	ul.totalmenu_list {width:95%;}
}

@media all and (max-width:1300px){
	.totalmenu_box {padding:100px 30px;}
	.menu_title strong {font-size:30px;}
	.menu_title span {font-size:14px;}

	a.btn_totalmenu_close {right:50px;}

	ul.totalmenu_list {width:100%; box-sizing:border-box;}
	ul.totalmenu_list>li .title strong {font-size:20px;}

	ul.submenulist {padding:7px 0;}
	ul.submenulist>li {padding:7px;}
	ul.submenulist>li>a {display:block; padding-left:20px; font-size:16px;}
}

/* 테스크탑 */
@media all and (max-width:1024px){
	a.btn_sidemenu {display:inline-block; font-size:18px; position:absolute; top:calc(50% - 9px); right:20px;}
	.gnbarea {display:none;}

	.totalmenu_box {display:none;}
}
/* 테블릿*/
@media all and (max-width:768px){
}
/* 모바일*/
@media all and (max-width:640px){
}

/* 모달 검색 //////////////////////////////////////////////////*/
.modal_searchbox {width:1300px; background-color:#fff; border-radius:10px; position:absolute; top:170px; left:calc(50% - 650px); z-index:200;}
.modal_searchbox .outline {padding:50px 20px; position:relative;}
.modal_searchbox .outline a.btn_searchbox_close {font-size:30px; color:#fff; position:absolute; top:-75px; right:65px;}
.modal_searchbox .outline .modal_search {text-align:center;}
.modal_searchbox .outline .modal_search input {padding:0 20px; box-sizing:border-box; width:600px; height:50px; font-size:19px; border:solid 2px #2ab6df; border-radius:50px;}
.modal_searchbox .outline .modal_search input:focus {outline-color:#1b99c0;}
.modal_searchbox .outline .modal_search button.modal_search {padding:0 20px; height:50px; color:#fff; font-size:19px; border:none; border-radius:50px; background-color:#10a4c3;}
.modal_searchbox .outline .modal_search button.modal_search:hover {opacity:0.9;}

@media all and (max-width:1300px){
	.modal_searchbox {width:calc(100% - 20px); top:170px; left:10px;}
}

/* 테스크탑 */
@media all and (max-width:1024px){
	.modal_searchbox {display:none;}
	.modal_searchbox .outline .modal_search input {width:400px;}
}
/* 테블릿*/
@media all and (max-width:768px){
	.modal_searchbox .outline .modal_search input {width:300px;}
}
/* 모바일*/
@media all and (max-width:640px){
	.modal_searchbox .outline {padding:50px 10px;}
	.modal_searchbox .outline a.btn_searchbox_close {font-size:24px; top:-40px; right:5px;}
	.modal_searchbox .outline .modal_search input {width:200px; height:36px; font-size:16px;}
	.modal_searchbox .outline .modal_search button.modal_search {padding:0 10px; height:36px; font-size:16px;}
}

/* 모바일 사이드 메뉴 //////////////////////////////////////////////////*/
.gnbarea_mobile {position:absolute; top:0; right:-300px; width:85%; height:100vh; height:100%; background-color:#fff; z-index:300;}
.gnbarea_mobile .outline {height:100vh; height:calc(100% - 50px); overflow-y:auto; box-sizing:border-box;}
.gnbarea_mobile .self_info_area {position:relative; background-color:#f5f5f5;}
.gnbarea_mobile .self_info_area .btn_sidemenu_close {display:inline-block; width:50px; height:50px; line-height:50px; text-align:center; position:absolute; top:10px; right:0;}
.gnbarea_mobile .self_info_area .btn_sidemenu_close i {font-size:20px;}


/* 모바일 로그인 영역 */
.logo_mobile {padding:15px; background-color:#e0f3ff;}
.logo_mobile img {height:20px;}
.loginbox_mobile {border-bottom:solid 3px #f2f2f2; background-color:#fff;}
.loginbox_mobile .btn_main_login {width:80%; height:42px; font-size:16px; color:#fff; border:none; background-color:#014099; border-radius:50px; transition: all 0.3s; position:relative; top:0;}

.loginbox_mobile .before {padding:30px 10px; text-align:center;}
.loginbox_mobile .before .ment {padding-top:10px; color:#666; font-weight:600;}
.loginbox_mobile .before .ment strong {color:#ff5722; font-weight:600;}

.loginbox_mobile .after {padding:20px 15px; text-align:center;}
.loginbox_mobile .after .user_txbox {padding:5px 0 5px 35px; line-height:28px; text-align:center; color:#333;}
.loginbox_mobile .after .user_txbox i {display:inline-block; font-size:28px; color:#999; vertical-align:middle;}
.loginbox_mobile .after .user_txbox span {display:inline-block; font-size:14px; color:#333; vertical-align: middle;}
.loginbox_mobile .after .user_txbox strong {font-size:18px;}

.loginbox_mobile .after .ment {padding-top:10px; color:#666; font-weight:600;}
.loginbox_mobile .after .ment strong {color:#ff5722; font-weight:600;}

/* 모바일 메뉴 */
ul.gnb_mobile {margin:0 10px 50px; border-top:solid 1px #fff;}
ul.gnb_mobile>li {border-bottom:solid 1px #f2f2f2; }
ul.gnb_mobile>li a.title {display:block; display:block; padding:10px 15px; color:#333; font-size:16px; font-weight:600; position:relative;}
ul.gnb_mobile>li a.title i {font-size:16px; color:#ccc; transform: rotate(0deg); transition: all 0.3s ease-out; position:absolute; top:calc(50% - 7px); right:10px;}
ul.gnb_mobile>li a.title.active {color:#1e5ca8; font-weight:600;}
ul.gnb_mobile>li a.title.active i {color:#1e5ca8; transform: rotate(180deg);}

ul.gnb_mobile>li .submenu {padding:0 10px 30px; background-color:#fff;}
ul.gnb_mobile>li .submenu>ul {}
ul.gnb_mobile>li .submenu>ul>li>a {display:block; padding:0 20px 0 30px; height:35px; line-height:40px; color:#333; font-weight:600; border-top:solid 1px #eee; position:relative;}
ul.gnb_mobile>li .submenu>ul>li>a:after {display:block; content:'-'; color:#333; position:absolute; left:15px; top:0;}
ul.gnb_mobile>li .submenu>ul>li:first-child>a {border-top:none;}
ul.gnb_mobile>li .submenu>ul>li>a:hover,
ul.gnb_mobile>li .submenu>ul>li>a.active {color:#000;}
ul.gnb_mobile>li .submenu>ul>li>a.active:after {display:block; content:'-'; color:#2196f3; position:absolute; left:15px; top:0;}
ul.gnb_mobile>li .submenu>ul>li>a i {font-size:10px; color:#999; transform: rotate(0deg); transition: all 0.3s ease-out; position:absolute; top:calc(50% - 7px); right:20px;}
ul.gnb_mobile>li .submenu>ul>li>a.active i {transform: rotate(180deg);}

ul.gnb_mobile>li .submenu_depth3 {margin:0 15px 30px; padding:10px; background-color:#f2f2f2; border-radius:5px;}
ul.gnb_mobile>li .submenu_depth3>ul {}
ul.gnb_mobile>li .submenu_depth3>ul>li>a {display:block; padding:0 20px 0 30px; height:30px; line-height:30px; color:#333; border-top:solid 1px #eee; position:relative;}
ul.gnb_mobile>li .submenu_depth3>ul>li>a:after {display:block; content:'·'; color:#333; position:absolute; left:15px; top:0;}
ul.gnb_mobile>li .submenu_depth3>ul>li:first-child>a {border-top:none;}
ul.gnb_mobile>li .submenu_depth3>ul>li>a:hover,
ul.gnb_mobile>li .submenu_depth3>ul>li>a.active {color:#000;}
ul.gnb_mobile>li .submenu_depth3>ul>li>a.active:after {display:block; content:'-'; color:#000; position:absolute; left:15px; top:0;}


.modal_screen_sidemenu {width:100%; height:100%; background-color:rgba(0,0,0,0.7); position:absolute; top:0; left:0; z-index:150;}
.modal_screen_search {width:100%; height:100%; background-color:rgba(5,64,86,0.9); position:absolute; top:0; left:0; z-index:150;}

.gnbarea_mobile .bottom_func {padding:0; width:100%; height:50px; border-top:solid 1px #e2e2e2; background-color:#f5f5f5; position:absolute; bottom:0; left:0;}
.gnbarea_mobile .bottom_func ul {overflow:hidden;}
.gnbarea_mobile .bottom_func ul li {float:left; width:50%; text-align:center;}
.gnbarea_mobile .bottom_func ul li a {display:block; height:50px; line-height:50px; color:#555555; border-left:solid 1px #ebebeb; border-right:solid 1px #fff;}
.gnbarea_mobile .bottom_func ul li a span {display:inline-block; vertical-align:middle;}
.gnbarea_mobile .bottom_func ul li:first-child a {border-left:none;}
.gnbarea_mobile .bottom_func ul li:last-child a {border-right:none;}
.gnbarea_mobile .bottom_func ul li a i {vertical-align: middle;}


@media all and (max-width:1300px){
}

/* 테스크탑 */
@media all and (max-width:1024px){
}
/* 테블릿*/
@media all and (max-width:768px){
	.gnbarea {display:none;}
	
	a.btn_sidemenu {display:inline-block; width:50px; height:50px; line-height:55px; text-align:center; position:absolute; top:calc(50% - 25px); right:5px;}
	a.btn_sidemenu i {font-size:22px;}
}
/* 모바일*/
@media all and (max-width:640px){
}

@media all and (max-width:414px){   
      
}

/*//////////////////////////////////////////////////////////////////////////////////////////
 메인 상단 영역 
 //////////////////////////////////////////////////////////////////////////////////////////*/
.main_wrap {padding-top:250px; height:1420px; box-sizing:border-box; background:url('../images/main/top_bg.png') #daf3ff no-repeat bottom center; position:relative;}

.mainvisual_road {position:relative; height:340px; background:url('../images/main/road.png') no-repeat top center;}
.road_mobile {display:none;}

.site_slogan {position:absolute; top:190px; right:150px;}
.site_slogan .outline {position:relative;}
.site_slogan .title {display:block; margin-bottom:15px; font-size:50px; color:#10466c; font-weight:800; position:relative;}
.site_slogan .title::after {display:block; content:''; width:50px; height:50px; background: url('../images/main/butterfly.png') no-repeat left top; 
	position:absolute; top:-30px; right:-35px;}
.site_slogan .lead_txt {display:block; font-size:20px; font-weight:600; color:#666666;}
.site_slogan .lead_txt span {display:block;}

/* 테스크탑 */
@media all and (max-width:1300px){
	.site_slogan {right:70px;}
}
@media all and (max-width:1024px){
	.site_slogan {top:180px; right:50px;}
	.site_slogan .title {font-size:42px;}
	.site_slogan .lead_txt {font-size:17px;}
}
/* 테블릿*/
@media all and (max-width:768px){ 
	.mainvisual_road {height:auto; background:none;}
	.road_mobile {display:inline-block;}	
	.site_slogan {display:block; margin:0 auto 30px; width:500px; position:initial; top:initial; right:initial;}
}
@media all and (max-width:640px){
	.main_wrap {padding-top:150px;}
	.site_slogan {width:420px;}
	.site_slogan .title {display:inline-block; font-size:35px; letter-spacing:-1px;}
	.site_slogan .lead_txt {font-size:14px;}
}
/* 모바일*/
@media all and (max-width:480px){
	.site_slogan {width:310px;}
	.site_slogan .title {margin-bottom:10px; font-size:27px;}
	.site_slogan .lead_txt {font-size:10px;}
	.site_slogan .lead_txt span {display:inline-block;}
}


/* 4개 분류 */
.main_cata_box {margin-top:60px;}
.main_cata_box ul {margin:0 15px;}
.main_cata_box ul::after {display:block; content:''; clear:both;}
.main_cata_box ul li {float:left; width:25%;}
.main_cata_box ul li .outline {margin:0 13px; padding:30px; background-color:#fff; border-radius:30px; box-sizing:border-box; 
	position:relative; top:0; transition:all 0.3s ease-out;	
	box-shadow:10px 10px 15px 5px rgba(0,0,0,0.1);
}

.main_cata_box ul li .outline .top {margin-bottom:25px;}
.main_cata_box ul li .outline .top .cata_iconbox {display:inline-block; margin-bottom:20px; width:78px; height:78px; line-height:78px; text-align:center; background-color:#ddd; border-radius:30px; box-sizing:border-box; transform:rotateY(0deg); transition:all 0.2s ease-out;}
.main_cata_box ul li .outline .top .cata_iconbox i {font-size:50px; font-weight:normal; color:#fff; transition:all 0.2s ease-out;}
.main_cata_box ul li .outline .top .title {display:block; margin-left:10px; margin-bottom:5px; font-size:26px; font-weight:600; color:#333333;}
.main_cata_box ul li .outline .top .lead_txt {display:block; margin-left:10px; font-size:15px; font-weight:600; color:#999999;}

.main_cata_box ul li .outline .detail_box {padding-top:10px; margin-left:10px; position:relative;}
.main_cata_box ul li .outline .detail_box::after {display:block; content:''; width:22px; height:4px; border-radius:5px; background-color:#b2b2b2; position:absolute; top:0; left:0;}
.main_cata_box ul li .outline .detail_box .detail_list {padding:2px 0;}
.main_cata_box ul li .outline .detail_box .detail_list a {display:block; padding:5px 0; font-size:16px; font-weight:600; color:#666666; border-radius:30px; transition:all 0.5s ease-out;}
.main_cata_box ul li .outline .detail_box .detail_list a i {display:inline-block; font-size:24px; color:#b2b2b2; font-weight:normal; vertical-align:middle; transform:rotateY(0deg); transition:0.5s;}
.main_cata_box ul li .outline .detail_box .detail_list a span.icon_img {display:inline-block; vertical-align:middle; width:25px; height:20px; background:url('../images/common/icon_money.png') no-repeat center center; transform:rotateY(0deg); transition:0.5s;}
.main_cata_box ul li .outline .detail_box .detail_list a span.title {display:inline-block; vertical-align:middle;}

.main_cata_box ul li .outline .detail_box .detail_list a:hover {padding:5px 20px; background-color:rgba(0,0,0,0.2);}
.main_cata_box ul li .outline .detail_box .detail_list a:hover i {transform:rotateY(180deg);}
.main_cata_box ul li .outline .detail_box .detail_list a:hover span.icon_img {transform:rotateY(180deg);}

.main_cata_box ul li:nth-child(1) {padding-top:25px;}
.main_cata_box ul li:nth-child(2) {padding-top:80px;}
.main_cata_box ul li:nth-child(3) {padding-top:0;}
.main_cata_box ul li:nth-child(4) {padding-top:110px;}

.main_cata_box ul li:nth-child(1) .outline .top .cata_iconbox {background-color:#1673c1;}
.main_cata_box ul li:nth-child(2) .outline .top .cata_iconbox {background-color:#00c97b;}
.main_cata_box ul li:nth-child(3) .outline .top .cata_iconbox {background-color:#ec8b00;}
.main_cata_box ul li:nth-child(4) .outline .top .cata_iconbox {background-color:#505f6c;}

/* 마우스 hover시 스타일 */
.main_cata_box ul li .outline:hover {position:relative; top:-7px; box-shadow:10px 15px 25px 10px rgba(0,0,0,0.1);}
.main_cata_box ul li .outline:hover .top .cata_iconbox {background-color:#fff; transform:rotateY(360deg);}
.main_cata_box ul li .outline:hover .top .title {color:#fff;}
.main_cata_box ul li .outline:hover .top .lead_txt {color:#fff; opacity:0.6;}

.main_cata_box ul li .outline:hover .detail_box::after {background-color:#000; opacity:0.3;}
.main_cata_box ul li .outline:hover .detail_box .detail_list a {color:#fff;}
.main_cata_box ul li .outline:hover .detail_box .detail_list a i {color:#fff; opacity:0.5;}
.main_cata_box ul li .outline:hover .detail_box .detail_list a span.icon_img {background:url('../images/common/icon_money_active.png') no-repeat center center;}

.main_cata_box ul li:nth-child(1) .outline:hover {background-color:#1673c1;}
.main_cata_box ul li:nth-child(1) .outline:hover .top .cata_iconbox i {color:#1673c1;}

.main_cata_box ul li:nth-child(2) .outline:hover {background-color:#00c97b;}
.main_cata_box ul li:nth-child(2) .outline:hover .top .cata_iconbox i {color:#00c97b;}

.main_cata_box ul li:nth-child(3) .outline:hover {background-color:#ec8b00;}
.main_cata_box ul li:nth-child(3) .outline:hover .top .cata_iconbox i {color:#ec8b00;}

.main_cata_box ul li:nth-child(4) .outline:hover {background-color:#505f6c;}
.main_cata_box ul li:nth-child(4) .outline:hover .top .cata_iconbox i {color:#505f6c;}

/* 테스크탑 */
@media all and (max-width:1300px){
	.main_wrap {padding-bottom:200px; height:initial;}
	.main_cata_box ul li .outline {margin:0 5px; padding:20px;}
	.main_cata_box ul li .outline .top .cata_iconbox {width:60px; height:60px; line-height:60px; text-align:center; background-color:#ddd; border-radius:26px;}
	.main_cata_box ul li .outline .top .cata_iconbox i {font-size:36px;}
	.main_cata_box ul li .outline .top .title {font-size:24px;}
	.main_cata_box ul li .outline .top .lead_txt {font-size:14px; letter-spacing:-1px;}

	.main_cata_box ul li:nth-child(1) {padding-top:0;}
	.main_cata_box ul li:nth-child(2) {padding-top:0;}
	.main_cata_box ul li:nth-child(3) {padding-top:0;}
	.main_cata_box ul li:nth-child(4) {padding-top:0;}
}
@media all and (max-width:1024px){
	
}

/* 테블릿*/
@media all and (max-width:768px){ 
	.main_wrap {padding-bottom:100px;}
	.main_cata_box ul li {margin-bottom:15px; width:50%;}
	.main_cata_box ul li .outline {margin:0 10px;}
}
/* 모바일*/
@media all and (max-width:480px){
	.main_cata_box ul {margin:0 10px;}
	.main_cata_box ul li .outline {margin:0 5px; padding:15px; border-radius:20px;}
	.main_cata_box ul li .outline .top {margin-bottom:15px;}
	.main_cata_box ul li .outline .top .cata_iconbox {margin-bottom:10px; width:50px; height:50px; line-height:50px; border-radius:20px;}
	.main_cata_box ul li .outline .top .cata_iconbox i {font-size:30px;}
	.main_cata_box ul li .outline .top .title {margin-left:5px; font-size:20px;}
	.main_cata_box ul li .outline .top .lead_txt {margin-left:5px; font-size:12px;}
	
	.main_cata_box ul li .outline .detail_box {margin-left:5px;}
	.main_cata_box ul li .outline .detail_box .detail_list a {padding:3px 0; font-size:14px;}
	.main_cata_box ul li .outline .detail_box .detail_list a:hover {padding:3px 10px;}

	.main_cata_box ul li .outline .detail_box .detail_list a i {font-size:20px;}
	.main_cata_box ul li .outline .detail_box .detail_list a span.icon_img {width:22px; height:20px; background:url('../images/common/icon_money.png') no-repeat center center; background-size:80%;}
}

/*//////////////////////////////////////////////////////////////////////////////////////////
 메인 하단 영역 
 //////////////////////////////////////////////////////////////////////////////////////////*/
.main_content {padding:100px 0 100px; background-color:#f2f2f2;}

/* 공지사항 타이틀 ///////////////////////////////////////////////////////////////////*/
.notice {}
.notice:after {display:block; content:''; clear:both;}
.notice .top {padding-left:10px; margin-bottom:20px; overflow:hidden;}
.notice .top h3 {float:left; font-size:30px; font-weight:600; color:#333333;}
.notice .top .btn_more {float:left; margin-top:5px; margin-left:15px;}
.notice .top .btn_more span {vertical-align:middle;}
.notice .top .btn_more span.bar {display:block; margin-top:5px; width:50px; height:3px; line-height:0; background-color:#ccc; position:relative;}
.notice .top .btn_more span.bar .point_bar {display:inline-block; color:#ec8b00; font-size:20px; font-weight:600; position:absolute; top:0px; right:-2px;}

/* 테스크탑 */
@media all and (max-width:1300px){
	.main_content .base_width {margin:0 10px; width:auto;}
}
@media all and (max-width:1024px){
}
/* 테블릿*/
@media all and (max-width:768px){ 
}
/* 모바일*/
@media all and (max-width:480px){
	.main_content {padding:50px 0 100px;}
	.notice .top h3 {font-size:24px}
	.notice .top .btn_more {margin-top:2px;}
}


/* 공지사항 리스트 ///////////////////////////////////////////////////////////////////*/
ul.col_list {margin-left:-2%;}
ul.col_list:after {display:block; content:''; clear:both;}
ul.col_list li {float:left; width:23%; margin-left:2%; margin-bottom:20px;}
ul.col_list li a {display:block; padding:15px; border:solid 1px #f3f3f3; background-color:#fff; border-radius:7px; transition: all 0.5s; position:relative; top:0;}
ul.col_list li a:hover {box-shadow:5px 5px 20px 0 #ccc; color:#ec8b00; top:-10px;}
/* transform: scale(1.02); */
ul.col_list li .row_top {overflow:hidden; margin-bottom:40px;}
ul.col_list li .row_top .cata_new {float:left; color:#ec8b00;}
ul.col_list li .row_top .date {float:right; color:#999999;}

ul.col_list li .cont {}
ul.col_list li .cont .title {display:block; margin-bottom:10px; color:#333; font-size:20px; font-weight:600; line-height:26px;
      height:80px; 
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
      text-overflow:ellipsis}
ul.col_list li .cont .lead_txt {display:block; color:#999; line-height:18px; font-weight:600;
      height:90px; 
      display:-webkit-box;
      -webkit-line-clamp:5;
      -webkit-box-orient:vertical;
      overflow:hidden;
      text-overflow:ellipsis}

ul.col_list li .deatil_view {margin-top:15px; text-align:right;}
ul.col_list li .deatil_view span.bar {display:inline-block; width:34px; height:2px; line-height:0; background-color:#bfbfbf; position:relative;}
ul.col_list li .deatil_view span.bar .point_bar {display:inline-block; color:#ec8b00; font-size:18px; font-weight:600; position:absolute; top:0px; right:-2px;}

/* 테스크탑 */
@media all and (max-width:1300px){

}
@media all and (max-width:1024px){
	ul.col_list li {width:48%; margin-bottom:20px;}

      ul.col_list li .row_top {margin-bottom:20px;}

      ul.col_list li .cont .title {font-size:18px; line-height:22px;
            height:65px; 
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
            text-overflow:ellipsis}
      ul.col_list li .cont .lead_txt {}
      ul.col_list li .cont.thum_type .title {margin-bottom:5px;
            max-height:40px; 
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            text-overflow:ellipsis
      }
      ul.col_list li .cont.thum_type .img {height:120px;}
}
/* 테블릿*/
@media all and (max-width:768px){ 
}
/* 모바일*/
@media all and (max-width:640px){
      ul.col_list {margin-left:0;}
      ul.col_list li {float:initial; width:initial; margin-left:0; margin-bottom:10px}

      ul.col_list li .cont .title {font-size:16px; height:auto; max-height:40px; line-height:22px; -webkit-line-clamp:2;}
      ul.col_list li .cont .lead_txt {display:block; color:#999; line-height:18px; font-size:12px;
            max-height:55px; 
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
            text-overflow:ellipsis}
      ul.col_list li .cont.thum_type .title {margin-bottom:5px;
            max-height:40px; 
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            text-overflow:ellipsis
      }
}


/* 메인 하단 배너 : 롤링 ////////////////////////////////////////////////////////////////////*/
.site_quickbanner {margin-top:70px; position:relative;}

.site_quickbanner h3 {padding-left:10px; font-size:30px; font-weight:600; color:#333;}

.site_banner_rolling {margin:0 -5px;}
.site_banner_rolling .outline {margin:0 20px; padding:10px 0;}
.site_banner_rolling a {display:block; padding:22px 0; text-align:center; font-weight:600; background-color:#fff; border-radius:50px; overflow:hidden; position:relative; top:0; transition: 0.3s;}
.site_banner_rolling a img {margin:0 auto;}
.site_banner_rolling a:hover {top:-5px;}

.site_banner_rolling .slick-dots {bottom:-20px; right:0;}
.site_banner_rolling .slick-dots li {margin:0;}
.site_banner_rolling .slick-dots li button:before {opacity:1; color:#cccccc; font-size:30px;}
.site_banner_rolling .slick-dots li.slick-active button:before {opacity:1; color:#ff9800;}

/* 테스크탑 */
@media all and (max-width:1300px){
      .site_banner_rolling {margin:0 5px;}
      .site_banner_rolling .outline {margin:0 5px;}
}
@media all and (max-width:1024px){
}

/* 테블릿*/
@media all and (max-width:768px){
      .site_quickbanner {display:block;}
}
/* 모바일*/
@media all and (max-width:480px){
	.site_quickbanner h3 {font-size:24px;}
	.site_banner_rolling a img {height:30px;}
}


/* Go_top */
a.go_page_top {display:inline-block; width:50px; height:50px; line-height:50px; text-align:center; font-size:20px; border-radius:50px; background-color:#014099; overflow:hidden;
	position:fixed; bottom:100px; right:10px; z-index:1; box-shadow:0 0 10px rgba(0,0,0,0.2);}
a.go_page_top i {color:#fff; transition:0.3s;}
a.go_page_top:hover {background-color:#2f6fc9;}

/* 퀵메뉴 */
.quickmenu {position:absolute; top:420px; right:50%; margin-right:-760px;}
.quickmenu.fixed {position:fixed; top:40px; right:50%; margin-right:-760px;}

.quickmenu.subquickmenu {position:absolute; top:50px; right:-110px; margin-right:0;}
.quickmenu.subquickmenu.fixed {position:fixed; top:90px; right:50%; margin-right:-760px;}

.quickmenu {padding:30px 10px 20px; width:100px; background-color:#fff; box-sizing:border-box; border:none; border-radius:100px; overflow:hidden;
	box-shadow:0 0 10px 0px rgba(0,0,0,0.2);} 
.quickmenu .top {margin-bottom:7px; text-align:center; position:relative;}
.quickmenu .top strong {font-size:16px; letter-spacing:-1px; font-weight:600;}
.quickmenu .top::after {display:block; content:''; width:1px; height:15px; background-color:#ccc; position:absolute; left:50%; bottom:-18px; z-index:0;}

.quickmenu ul {}
.quickmenu.subquickmenu ul {}

.quickmenu ul li {padding-top:10px; text-align:center;}
.quickmenu ul li a {display:block;}
.quickmenu ul li a .icon {display:inline-block; margin-bottom:5px; font-size:20px; color:#a1a1a1; width:55px; height:55px; line-height:55px; text-align:center; background-color:#e2e2e2; border-radius:50px; transition: 0.5s;}
.quickmenu ul li a .title {display:block; color:#666666;}

.quickmenu ul li a:hover .icon {color:#fff; background-color:#1f97e7;}
.quickmenu ul li a:hover .title {display:block; color:#1673c1;}

/* 테스크탑 */
@media all and (max-width:1300px){
	.quickmenu {display:none;}
}


/*//////////////////////////////////////////////////////////////////////////////////////////
 Footer 
 //////////////////////////////////////////////////////////////////////////////////////////*/
 #footer {padding:45px 0 70px; background-color:#283b46; position:relative;}
 .footer_grid_top {display:flex; padding-bottom:20px; justify-content:space-between;}

 .footer_grid_bottom {padding-top:20px; color:#8894ac; font-weight:normal; border-top:solid 1px #485862; position:relative;
	word-break:keep-all; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;}
 .footer_grid_bottom ul.footer_menu {overflow:hidden; margin-bottom:15px;}
 .footer_grid_bottom ul.footer_menu li {float:left; padding:0 15px; position:relative;}
 .footer_grid_bottom ul.footer_menu li::after {display:block; content:''; width:1px; height:10px; background-color:#fff; position:absolute; top:calc(50% - 5px); left:0; opacity:0.2;}
 .footer_grid_bottom ul.footer_menu li:first-child:after {display:block; content:''; width:0; height:0;}
 .footer_grid_bottom ul.footer_menu li:first-child {padding-left:0;}
 .footer_grid_bottom ul.footer_menu li a {display:block; color:#fff;}
 .footer_grid_bottom ul.footer_menu li a:hover {text-decoration:underline;}
 .footer_grid_bottom ul.footer_menu li a.btn_footer_policy {color:#ff9900;}
 
 .footer_grid_bottom .adress {margin-bottom:10px;}
 .footer_grid_bottom .copyright {}

/* 주요사이트 */
.relative_site {width:200px; position:relative;}
.relative_site a.btn_siteview {display:flex; padding:0 10px; justify-content:space-between; align-items:center; color:#ccc; height:38px; line-height:38px; background-color:#1e2e37; border-radius:5px; position:relative;}
.relative_site a.btn_siteview .title {display:inline-block;}
.relative_site a.btn_siteview i {opacity:0.5; transform:rotate(0deg); transition: all 0.3s ease-out;}
.relative_site a.btn_siteview.active i {opacity:1; transform:rotate(-90deg);}

.relative_site .site_list {width:200px; position:absolute; bottom:65px; right:0;}
.relative_site .site_list ul {background-color:#1e2e37; border-radius:10px; overflow:hidden;}
.relative_site .site_list ul li {}
.relative_site .site_list ul li a {display:block; padding:15px 10px;  color:#ccc; border-top:solid 1px #2d4453;}
.relative_site .site_list ul li a:hover {color:#fff; background-color:#1673c1; border-top:solid 1px #1673c1;}
.relative_site .site_list ul li:first-child a,
.relative_site .site_list ul li:first-child a:hover {border-top:none;}


/* 데스크탑 */
@media all and (max-width:1300px){
	#footer .base_width {margin:0 10px; width:auto; box-sizing:border-box;}
}
/* 테블릿 */
@media all and (max-width:640px){
}
/* 테블릿 */
@media all and (max-width:480px){
	.footer_logo {display:none;}
	.relative_site .site_list {bottom:45px;}
    .adress, .copyright {font-size:12px;}
}



/*///////////////////////////////////////////////////////////////////////////////////////////////
 로그인
 ///////////////////////////////////////////////////////////////////////////////////////////////*/
 .login_bg {background-color:#363b59;}
 .login_page {margin:0 auto; padding:10px; width:790px; box-sizing:border-box; background-color:#fff; border-radius:10px;
	position:absolute; top:calc(50% - 150px); left:50%; margin-left:-395px;}
.login_page .outline {display:table; width:100%; height:300px;}
.login_page .outline .thum {display:table-cell; width:335px; background:url('../images/login/thum.png') no-repeat center center #333; background-size:cover; border-radius:3px; box-sizing:border-box;}

.login_box {display:table-cell; padding:0 30px; text-align:center; vertical-align:middle; box-sizing:border-box;}
.login_box .inner_box {padding:40px 0; margin:0 auto; width:350px;}
.login_box h2 {padding:5px 0 10px; text-align:center; font-size:24px; color:#666666;}
.login_box h2 img {vertical-align:middle; height:23px;}
.login_box h2 span {display:inline-block; margin-left:5px; padding-left:10px; font-weight:normal; vertical-align:middle; position:relative;}
.login_box h2 span:after {display:block; content:''; width:1px; height:18px; background-color:#ccc; clear:both; position:absolute; top:calc(50% - 9px); left:0;}

.login_ment {margin-bottom:15px; font-size:13px;}

.login_box button.btn_login {width:100%; height:38px; font-size:18px; color:#fff; border:none; background-color:#1a3895; border-radius:30px;}
.login_box input[type="text"] {margin-bottom:13px; padding-left:40px; width:100%; height:38px; font-size:16px; color:#999999; border-radius:38px; color:#333; background:url('../images/login/icon_email.png') no-repeat 15px center #efefef; border:none; box-sizing:border-box;}
.login_box input[type="password"] {margin-bottom:13px; padding-left:40px; width:100%; height:38px; font-size:16px; color:#999999; border-radius:38px; color:#333; background:url('../images/login/icon_key.png') no-repeat 15px center #efefef; border:none; box-sizing:border-box;}

/* 테블릿*/
@media all and (max-width:820px){
	.login_page {width:96%; left:2%; margin-left:0;}
	.login_page .outline .thum {width:335px;}      
}

@media all and (max-width:640px){
	.login_page .outline {display:block;}
	.login_page .outline .thum {display:block; width:100%;}
	.login_box {display:block; padding:0; box-sizing: border-box;}      
}
/* 모바일*/
@media all and (max-width:480px){   
	.login_page {width:90%; left:5%;}
	.login_page .outline {height:initial;}
	.login_box .inner_box {width:90%;}      

	.login_box h2 {font-size:20px;}
	.login_box h2 img {vertical-align:middle; height:18px;}

	.login_ment {display:none;}
}