@charset "utf-8";

body {font-size:15px;}
.wrap{max-width:1400px}
section{padding:55px 0% 70px}
section h3{font-size:2.13em; font-weight:normal}
/*** 로그인/제품홍보 ***/
.member{position:relative; padding:0px; background-color:#0a59ba; background-image:url(/support/img/main/login_bg.gif); background-repeat:no-repeat; background-position:-26% bottom; overflow:hidden}
.member:before{display:block; content:''; position:absolute; top:0px; right:0%; width:50%; height:100%; background:#eef0f2; border-bottom:1px solid rgba(0,0,0,.03); box-sizing:border-box}
.member>div>div{float:left; position:relative; padding:3.5% 4%}
.member>div>div.visual{float:left; position:relative; padding:0% 0%}
/* 로그인 */
.member div.login{width:25%; padding-right:4.7%; padding-left:0px}
.member div.login h3{color:#fff}
.member div.login h3 span{display:inline-block; padding-right:40px; background:url(/support/img/main/login_ic.gif) no-repeat right 9px;}
.member div.login p.check_num{margin:35px 0px 10px; text-align:right; color:#fff}
.member div.login p.check_num input{width:17px; height:17px; vertical-align:top; border:0px; background:#a6c9f3; appearance:none; -webkit-appearance:none; cursor:pointer}
.member div.login p.check_num input:checked{background:#194881}
.member div.login p.check_num input:checked:after{display:block; content:'√'; margin-top:-5px; color:#fff; font-size:18px; font-weight:bold}
.member div.login p.check_num input:checked+label{font-weight:bold}
.member div.login p.check_num label{vertical-align:top}
.member div.login ul.form li{margin-top:4px}
.member div.login ul.form li input[type=text],
.member div.login ul.form li input[type=password]{text-align:center; width:100%; height:45px; line-height:45px; font-size:1.07em; background:#eef0f2; border:0px}
.member div.login ul.form li input[type=submit]{text-align:center; width:100%; height:65px; margin-top:0px; font-size:1.2em; color:#194881; font-weight:bold; background:#a6c9f3; border:0px; appearance:none; -webkit-appearance:none}
.member div.login ul.login_btn{margin-top:30px; overflow:hidden}
.member div.login ul.login_btn li{float:left; text-align:center; width:49.5%; border:1px solid #3677c7}
.member div.login ul.login_btn li:last-child{float:right}
.member div.login ul.login_btn li a{display:block; padding:5px 2px; color:#93b4dc}
.member div.login h3.name:after{display:block; content:''; margin-top:30px; width:25%; height:2px; background:#fff}
.member div.login p.txt{margin-top:11%; color:#fff; font-size:16px}
.member div.login ul.info{margin-top:8%}
.member div.login ul.info li{margin-top:5px; color:#fff; font-size:1.02em; letter-spacing:0px}
.member div.login ul.info li span{letter-spacing:-1px}
.member div.login ul.info_btn{margin-top:30px; overflow:hidden}
.member div.login ul.info_btn li{float:left; text-align:center; width:49.5%}
.member div.login ul.info_btn li:last-child{float:right}
.member div.login ul.info_btn li a{display:block}
.member div.login ul.info_btn li a,
.member div.login ul.info_btn li input[type=submit]{text-align:center; width:100%; height:50px; line-height:50px; margin-top:0px; font-size:1em; color:#194881; font-weight:bold; background:#a6c9f3; border:0px; appearance:none; -webkit-appearance:none}
.member div.login ul.info_btn+.login_btn{margin-top:5px}
/* 제품홍보 */
.member div.product{padding-right:0px; width:75%; background:#eef0f2; height:455px; border-bottom:1px solid rgba(0,0,0,.03)}
.member div.product h3{position:absolute; left:6%; top:0px; padding-top:4.5%}
.member div.product a.alllist {position:absolute; display:inline-block; width:100px; margin:10px 0 0 10px; line-height:25px; border-radius:50px; font-size:14px; text-align:center; color:#fff; background:#8392a5; z-index:10 }
.member div.product div.con{position:relative; text-align:right; padding-left:140px; padding-top:5px}
.member div.product div.con .tab{position:relative; display:inline-block; margin-top:7px; }
.member div.product div.con .tab:before{display:block; content:''; position:absolute; left:-1px; top:10px; width:1px; height:13px; background:#ddd}
.member div.product div.con .tab01:before{display:none}
.member div.product div.con .tab a{display:block; padding:5px 10px}
.member div.product div.con .tab.select a:before,
.member div.product div.con .tab.select a:after{display:block; content:''; position:absolute; left:44%; bottom:-7px; width:7px; height:2px; transform:translateX(-25%); -webkit-transform:translateX(-25%); transform:rotate(45deg); -webkit-transform:rotate(45deg); background:#333; border-radius:2px}
.member div.product div.con .tab.select a:after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg); margin-left:4px}
.member div.product div.con .tab.select a{font-weight:bold}
.member div.product div.con .tab_con{display:none; position:absolute; left:0px; margin-top:35px; width:100%; overflow:hidden}
.member div.product div.con .tab.select+.tab_con{display:block}
.member div.product div.con ul.list{position:relative; text-align:left; padding-bottom:2px; font-size:0px; white-space:nowrap}
.member div.product div.con ul.list li{display:inline-block; text-align:left; margin-left:1%; width:19%; font-size:15px; box-shadow:0px 1px 1px rgba(0,0,0,.2)}
.member div.product div.con ul.list li a{display:block; position:relative; text-align:center; height:245px; overflow:hidden}
.member div.product div.con ul.list li a img{width:100%; min-height:170px}
.member div.product div.con ul.list li a img.noimg{width:auto; min-height:auto; margin-top:10%}
.member div.product div.con ul.list li a p{position:absolute; left:0px; bottom:0px; display:flex; justify-content:center; align-items:center; padding:5% 10%; width:100%; height:75px; line-height:145%; background:rgba(255,255,255,.8); white-space:normal}
.member div.product div.con ul.product_btn{margin-top:15px; text-align:center}
.member div.product div.con ul.product_btn li{display:inline-block; font-size:1.14em; line-height:25px; letter-spacing:0px }
.member div.product div.con ul.product_btn li a{display:block; position:relative; margin:2px; width:25px; height:25px; border-radius:50px; text-indent:-5000px; background:#8392a5}
.member div.product div.con ul.product_btn li a:before,
.member div.product div.con ul.product_btn li a:after{display:block; content:''; position:absolute; left:7px; top:9px; width:9px; height:3px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); background:#fff; border-radius:2px; box-shadow:0px 0px 2px rgba(0,0,0,.2)}
.member div.product div.con ul.product_btn li a:after{transform:rotate(45deg); -webkit-transform:rotate(45deg); margin-top:5px}
.member div.product div.con ul.product_btn li.btn_next a:before{left:9px; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
.member div.product div.con ul.product_btn li.btn_next a:after{left:9px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
.member div.product div.con p.noproduct{margin-top:7%; padding-top:95px; background:url(/support/img/main/ic_noproduct.gif) no-repeat center top; text-align:center; font-size:18px}

/* 제품홍보02 */
.member div.visual{padding-right:0px; width:75%; background:#eef0f2; height:455px; border-bottom:1px solid rgba(0,0,0,.03)}
.member div.visual img{max-width:101%; height:100%;}



/*** 공고 ***/
.notice{position:relative}
.notice h3{position:absolute; top:55px; /* left:35%; */ left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); width:250px}
.notice h3.tab_other{margin-left:250px}
.notice h3.tab_biz{margin-left:500px}
.notice h3:after{display:block; content:''; position:absolute; left:-23px; top:11px; width:1px; height:27px; background:#ccc}
.notice h3:first-child:after{display:none}
.notice h3 a{display:block; position:relative; padding-left:40px}
.notice h3 a:after{display:block; content:''; position:absolute; left:0px; top:21%; width:26px; height:26px; border:3px solid #ddd; border-radius:50px}
.notice h3 a span:before,
.notice h3 a span:after{display:block; content:''; position:absolute; left:9px; top:55%; width:10px; height:3px; background:#ddd; border-radius:50px}
.notice h3 a span:before{transform:rotate(45deg); -webkit-transform:rotate(45deg)}
.notice h3 a span:after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg); margin-left:5px}
.notice h3.select a{font-weight:bold; color:#194881}
.notice h3.select a:after{border-color:#194881}
.notice h3.select a span:before, .notice h3.select a span:after{background:#194881}
.notice h3.select+div{display:block}
.notice > div {display:none;}
.notice ul.tab_con{text-align:center; margin-top:95px}
.notice ul.tab_con{margin-top:60px; padding-right:25px; padding-bottom:5px; overflow-x:scroll; white-space:nowrap} /*모바일에 있던것 갖고옴*/

.notice ul.tab_con::-webkit-scrollbar {width:10px; height:10px;}
.notice ul.tab_con::-webkit-scrollbar-thumb {background:#c63636;  border-radius:5px;}
.notice ul.tab_con::-webkit-scrollbar-track {background:#f6f6f6; border-radius:5px;}

.notice ul.tab_con li{display:inline-block; text-align:left; margin:0px .2%; width:24%; background:#eef0f2; white-space:normal; /* transform:all ease .2s */}
.notice ul.tab_con li a{display:block; padding:10% 12%}
.notice ul.tab_con li a:hover{background:#fff; box-shadow:0px 1px 5px rgba(0,0,0,.3); text-decoration:none}
.notice ul.tab_con li a:hover p.tit{font-weight:bold}
.notice ul.tab_con li span.state{display:inline-block; text-align:center; padding:4px 10px; min-width:65px; line-height:15px; color:#fff; border-radius:20px;}
.notice ul.tab_con li span.state01{background:#c63636}
.notice ul.tab_con li span.state02{background:#757575}
.notice ul.tab_con li p{margin-top:10px}
.notice ul.tab_con li p.tit{font-size:1.33em; line-height:1.5em; height:56px; overflow:hidden}
.notice ul.tab_con li p.txt{height:67px; line-height:150%; color:#484848; overflow:hidden}
.notice ul.tab_con li p.date{color:#484848}
.notice ul.tab_con li p.date span{letter-spacing:0px}
/*.notice div.more{display:none}*/
.notice h3.select+ul.tab_con+div.more{display:block}
.notice .more {text-align:center;}
.notice .more a {display:inline-block; margin-top:30px; padding:7px 0px; width:100px; border:1px #b1b1b1 solid; border-radius:20px;}

/*** 서비스 ***/
.banr{padding-bottom:0px; background:#eef0f2; border-top:1px solid rgba(0,0,0,.1)}
.banr h3{text-align:center; letter-spacing:-2px; font-size:2.53em}
.banr h3 span{font-weight:bold}
.banr ul:after{display:block; content:''; clear:both}
.banr ul li{float:left; width:20%; margin-top:20px; height:268px}
.banr ul li a{display:block; text-align:center; padding-top:175px; padding-bottom:35px; font-size:1.2em; background-repeat:no-repeat; background-position:center 60px; transition:all ease .1s}
.banr ul li.ic01 a{background-image:url(/support/img/main/banr_ic01.gif)}
.banr ul li.ic02 a{background-image:url(/support/img/main/banr_ic02.gif)}
.banr ul li.ic03 a{background-image:url(/support/img/main/banr_ic03.gif)}
.banr ul li.ic04 a{background-image:url(/support/img/main/banr_ic04.gif)}
.banr ul li.ic05 a{background-image:url(/support/img/main/banr_ic05.gif)}
.banr ul li.ic06 a{background-image:url(/support/img/main/banr_ic06.gif)}
.banr ul li.ic07 a{background-image:url(/support/img/main/banr_ic07.gif)}
.banr ul li a:hover{background-color:#fff; margin-top:10px; box-shadow:0px 2px 3px rgba(0,0,0,0.5)}
.banr ul li a span{display:block; height:48px; word-break:keep-all}

/*** 옴부즈만 ***/
.ombudsman{padding:0px; background:#7c8fa1 url(/support/img/main/ombudsman_bg.gif) center center}
.ombudsman h3{letter-spacing:-1.5px}
.ombudsman h3 span{font-weight:bold}
.ombudsman>div{padding:15px 0px; overflow:hidden; background:url(/support/img/main/ombudsman_img.png) no-repeat right center}
.ombudsman .tit{float:left; margin:20px 0px; width:28%; word-break:keep-all}
.ombudsman .tit a{display:inline-block; margin-top:15px; padding:3px 22px 5px; font-size:1.07em; font-weight:bold; color:#cee6ff; background:#466b97; text-shadow:0px 0px 2px rgba(0,0,0,.1); border-radius:50px}
.ombudsman .txt{float:left; width:70%; font-size:0px}

/*** 정보마당 ***/
.news{overflow:hidden}
.news h3{text-align:center; letter-spacing:-2px; font-size:2.53em}
.news h3 span{font-weight:bold}
.news dl{position:relative; float:left; margin-top:35px; width:30.65%; margin-left:4%}
.news dl:after{display:block; content:''; position:absolute; left:0px; top:25px; width:100%; height:2px; background:#333; z-index:-1}
.news dl:first-child{margin-left:0%}
.news dl dt{display:inline-block; padding-right:20px; background:#fff; margin:10px 0px; font-size:1.55em}
.news dl dd{padding:10px 3px; border-bottom:1px dotted #ccc; font-size:1.07em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
.news dl dd:last-child{border-bottom:0px}
.news dl dd.more{text-align:right}
.news dl dd.more a{display:inline-block; position:relative; padding-left:15px; font-size:.93em; color:#888}
.news dl dd.more a:before,
.news dl dd.more a:after{display:block; content:''; position:absolute; background:#aaa}
.news dl dd.more a:before{left:0px; top:9px; width:11px; height:1px}
.news dl dd.more a:after{left:5px; top:4px; width:1px; height:11px}

/*** 관련기관 ***/
.related{padding:25px 0; background:#333}
.related #ban{position:relative}
.related #ban h3{position:absolute; left:0px; top:-3px; color:#aaa; font-size:1.2em}
.related #ban ul.btn_control{position:absolute; left:85px;}
.related #ban ul.btn_control li{float:left; width:50px; border:1px solid #222; border-left:0px}
.related #ban ul.btn_control li a{display:block; text-align:center; padding:3px 0px 5px; width:50px; line-height:14px; font-size:14px; color:#aaa}
.related #ban ul.btn_control li:first-child{border-left:1px solid #222}
.related #ban div{margin-left:260px; margin-right:40px; overflow:hidden}
.related #ban div ul{position:relative; white-space:nowrap}
.related #ban div ul li{position:relative; display:inline-block; margin:0px 19px}
.related #ban div ul li:After{display:block; content:''; position:absolute; top:4px; left:-20px;  width:1px; height:14px; background:#3e3e3e}
.related #ban div ul li a{color:#888}
.related #ban ul.btn_banr>li{position:absolute; top:-2px}
.related #ban ul.btn_banr>li.btn_prev{left:220px;}
.related #ban ul.btn_banr>li.btn_next{right:0px;}
.related #ban ul.btn_banr>li>a{display:block; position:relative; width:25px; height:25px}
.related #ban ul.btn_banr>li>a:after,
.related #ban ul.btn_banr>li>a:before{display:block; content:''; position:absolute; top:8px; left:6px; width:12px; height:3px ;background:#aaa; border-radius:5px; 
transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}
.related #ban ul.btn_banr>li>a:before{margin-top:7px}
.related #ban ul.btn_banr>li.btn_prev>a:before{transform:rotate(45deg); -webkit-transform:rotate(45deg)}
.related #ban ul.btn_banr>li.btn_next>a:after{transform:rotate(45deg); -webkit-transform:rotate(45deg)}


/*******************************************************************************************************************/


@media screen and (max-width:800px){
	body {font-size:13px;}
	section{padding:40px 0px 50px}
 	section h3{font-size:2.3em; word-break:keep-all}
	.member{background:#fff}
	.member .wrap{width:100%}
	.member:before{display:none}
	.member>div>div{float:none; width:auto !important}
	.member div.login{padding:8% 8%; background:#0a59ba url(/support/img/main/login_bg.gif) no-repeat left bottom; }
	.member div.login .con{padding:0px 2%}
	.member div.login p.check_num{margin:10px 0px 10px}
	.member div.login ul.login_btn{margin-top:20px}	
	.member div.login p.txt{margin-top:8%; font-size:14px}
	.member div.login ul.info{margin-top:5%}
	.member div.product{padding:40px 0%; height:480px}
	.member div.product h3{left:8%; padding-top:8%}
	.member div.product div.con{margin-top:45px; text-align:center !important}
	.member div.product div.con .tab{margin-top:5px; min-width:22%}
	.member div.product div.con .tab:before{display:none}
	.member div.product div.con .tab>a{border:1px solid #ddd; background:#fff}
	.member div.product div.con .tab.select>a{border:1px solid #194881; background:#194881; color:#fff}
	.member div.product div.con .tab.select a:before, 
	.member div.product div.con .tab.select a:after{display:none}
	.member div.product div.con .tab_con{width:100%; margin-top:20px}
	.member div.product div.con .tab01+.tab_con, 
	.member div.product div.con .tab02+.tab_con, 
	.member div.product div.con .tab03+.tab_con, 
	.member div.product div.con .tab04+.tab_con{margin-top:54px}
	.member div.product div.con ul.list{overflow-x:scroll; white-space:nowrap; padding-right:25px; padding-bottom:5px}
	.member div.product div.con ul.list::-webkit-scrollbar{height:4px}
	.member div.product div.con ul.list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1)}
	.member div.product div.con ul.list::-webkit-resizer{width:40px; height:50px}
	.member div.product div.con ul.list li{width:200px}
	.member div.product div.con ul.list li:first-child{margin-left:8%}
	.notice h3{top:40px; left:20%; width:150px; font-size:21px}
	.notice h3.tab_other{margin-left:160px}
	.notice h3.tab_biz{margin-left:320px}
	.notice h3:after{left:-13px; top:7px; height:20px}
	.notice h3 a{padding-left:28px; height:auto}
	.notice h3 a:after{width:17px; height:17px}
	.notice h3 a span:before, .notice h3 a span:after{left:5px; width:8px}
	.notice h3 a span:after{margin-left:5px}
	.notice ul.tab_con{margin-top:60px; padding-right:25px; padding-bottom:5px; overflow-x:scroll; white-space:nowrap}
	.notice ul.tab_con::-webkit-scrollbar{height:4px; margin-left:50px}
	.notice ul.tab_con::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1)}
	.notice ul.tab_con li{white-space:normal; width:240px}
	.notice ul.tab_con li:first-child{margin-left:8%}
	.notice ul.tab_con li a{}
	.notice ul.tab_con li p.txt{height:60px}
	.banr ul{text-align:center; padding:30px 10px}
	.banr ul li{float:none; display:inline-block; vertical-align:top; width:24%; height:auto}
	.banr ul li a{padding:10px 10px; padding-top:60px; background-position:center top; background-size:60px; line-height:140%}
	.banr ul li a:hover{margin-top:0px}
	.banr ul li a span{display:flex; align-items:center; justify-content:center;}
	.ombudsman>div{background-size:cover}
	.ombudsman .tit{float:none; margin:20px 20px 0px; width:100%}
	.ombudsman .tit span{display:block}
	.ombudsman .txt{float:none; width:100%}
	.news>div{position:relative; height:300px}
	.news dl{position:absolute; float:none; margin:20px 6% !important; padding-top:95px; width:88%}
	.news dl:after{display:none}
	.news dl dt{position:absolute; top:0px; text-align:center; width:24.5%; height:65px; padding:9px 0px; font-weight:bold; border:2px solid #ddd; font-size:1.3em; line-height:1.3em; z-index:1; border-radius:2px}
	.news dl.select dt{border-color:#194881; background:#194881; transition:all ease .1s; color:#fff}
	.news dl.select dt:after{display:block; content:''; position:absolute; bottom:-12px; left:47%; width:0px; height:0px; border:5px solid transparent; border-top-color:#194881; border-radius:2px}
	.news dl.news01 dt{left:0%}
	.news dl.news02 dt{left:25.5%}
	.news dl.news03 dt{left:51%}
	/* .news dl.news04 dt{left:76.5%; padding-top:20px} */
	.news dl.news04 dt{left:51%; padding-top:20px}
	.news dl dd{display:none; padding:7px 3px} 
	.news dl.select dd{display:block}

	.member div.visual{padding-right:0px; width:75%; background:#fff; max-height:230px; border-bottom:0px solid rgba(0,0,0,.03)}
	.member div.visual img{width:101%; height:auto;}
}

@media screen and (max-width:1200px){
		.member div.product div.con{text-align:left; margin-top:45px; padding-left:0px}
		.member div.product div.con .tab a{padding:5px 6px}
}

/*레이어팝업*/
#layerpop {position:absolute; top:140px; left:120px; z-index:500000; }
#layerpop>div { display:inline-block; vertical-align:top; border:1px solid #111; box-shadow:1px 1px 6px rgba(0,0,0,0.5); }
#layerpop p.pop_con { overflow:hidden; line-height:0; background:#111; }
#layerpop p.pop_con a { line-height:0; }
#layerpop div.close_box { padding:0 10px; height:47px; background:#111; text-align:right; line-height:46px; font-weight:500; }
#layerpop div.close_box label { color:#fff; font-size:14px; }
#layerpop div.close_box input[type=button] { margin-left:20px; padding:7px 20px 10px 20px; height:31px; border:0px; background:#fff; color:#373737; font-size:14px; line-height:14px; font-weight:500; }
@media all and (max-width:839px)
{
	#layerpop { left:0; margin-left:0; }
	#layerpop img { width:100%; }
}