@charset "utf-8";
@import url("sub.css");
@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);

/* 공통속성
=========================================================*/
*{margin: 0; padding: 0; border: 0;}
html{margin: 0 auto; box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-webkit-box-sizing: border-box;}
body{font-family: "Nanum Gothic", "나눔고딕", "Malgun Gothic", "돋움", "Dotum", "굴림", "Gulim", sans-serif; background:none; }
.cf:after{content:""; display: block; clear: both;}
.fr{float:right}
.fl{float: left;}
.cb{clear: both;}
.defaultWrite > table{width:100% !important}
i{font-style: normal;}
table{border-collapse:collapse;}
table td{padding:0}
ul,li,a{list-style: none; text-decoration: none;}
em{border:0; font-family: sans-serif; color: #676767; font-size: 14px;}
p, a{font-size: 14px; line-height: 20px;}
h1, h2, h3, h4, h5, h6{font-family: 'NanumSquare', "Noto Sans KR"; font-size: 18px;}
.sub_all h3.hi{margin: 15px 0;}
.sub_all h3.hi img{padding-right: 5px; vertical-align: middle;}
h3.title{font-size: 28px; color: #444; padding-bottom: 15px;}

/* table공통
=========================================================*/
.sub_all table {width:100%; border-top:1px solid #5f5c5a; margin:10px 0;}
.sub_all tr {border-bottom:1px solid #e0e0e0}
.sub_all th {background:#f9f9f9; color:#555; padding:10px; font-size:13px; border-right:1px dashed #e0e0e0;font-family: 'NanumSquare', "Noto Sans KR";}
.sub_all td {text-align: center; padding:15px 10px; line-height:1.6; border-right: 1px dashed #e0e0e0;}
.sub_all tr th:last-child, .sub_all tr td:last-child {border-right: none;}
.sub_all table td.img img{width: 100%;}

/* main
==========================================*/
.main .visual {padding-bottom:0;}
.main .visual .bx-pager{margin-top: 35px;}

/* top menu
==========================================*/
#Header{height: 140px; background: url(/image/bg_subTop.jpg) no-repeat;}
#Header .headIn .logo{padding-top: 40px;}
#Header .headIn .logo a {display:block; width:214px; height:70px;background:url('/image/logo.png') no-repeat; text-indent:-999em; color:#fff;}
#Wrap {background:none;}
#Wrap.mainVisual  {background:url('/image/bg_main.gif') no-repeat;}
#Gnb > ul > li > a{display:block; padding:15px 0; font-size:20px; font-weight:bold; color:#414141; font-family: 'NanumSquare', "Noto Sans KR";}
#Gnb .subBox {display:none; position:absolute; left:50%; top:50px; z-index:60;  margin-left:-71px;}
#Gnb .subMenu {width:142px; background:#fff;}
#Gnb .subMenu li a {display:block; margin:0 10px; border-top:1px solid #dedeee; font-size:14px; line-height:38px; color:#000;}
#Gnb .subMenu li:first-child  a {border-top:0;}
#Gnb .subMenu li:hover {background:#444;}
#Gnb .subMenu li:hover a {color:#fff;}
#Gnb .subMenu li a:hover{border-top: 1px solid #444;}
#Gnb .solution {display:none;}
#Container {width:100%; display: inline-block; margin-bottom: 3%;}
.contents {max-width:960px; margin:0 auto; padding:30px 0;}
#Gnb {display:block; float:right; padding-top:30px;}
#Gnb .util {margin-bottom:10px; text-align:right;}
#Gnb .util a {display:inline-block; padding:0 10px; background:url('/html/images/bar_util.gif') no-repeat 0 5px; color:#0c0c0c; font-size:12px;}
#Gnb .util a:first-child {background:none;}
#Gnb .util select {height:17px; border:1px solid #707070; line-height:17px; font-size:12px;}

/* 공지사항ㆍ이용안내
==========================================*/
.mainMenu {margin-top:50px; overflow:hidden}
.mainMenu .mainwrap  { padding:30px 0 40px;overflow:hidden}
.mainMenu .notice {width:470px; height:180px; border:1px solid #d9d9d9; float:left; padding:15px;box-sizing:border-box;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}
.mainMenu .notice h3,
.mainMenu .guide h3 {text-align: center; font-size:20px; color:#171717; font-weight:normal;margin-bottom:10px}
.mainMenu .notice img,
.mainMenu .guide img {vertical-align:middle; float: right;}
.mainMenu .notice ul,
.mainMenu .guide .guide_box {float:right; padding:0; overflow:initial; width: 100%;}
.mainMenu .notice ul span {float:right;color:#969595;}
.mainMenu .notice ul li,
.mainMenu .guide .guide_box .info li {background:url('/html/images/dot_b.gif') 0 13px no-repeat; padding-left:10px; line-height:30px; border-bottom:1px solid #ededed;overflow:hidden; float:none;margin:0; width: 97.8%;}
.mainMenu .notice ul li a {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;width:70%; float:left; line-height: 30px;}
.mainMenu .notice ul li:last-child {border-bottom:0}
.mainMenu .guide {width:470px; height:180px;border:1px solid #d9d9d9;float:right;padding:15px;box-sizing:border-box;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}
.mainMenu .guide .guide_box .info_img{float: left; width: 32%;}
.mainMenu .guide .guide_box .info_img img{max-width: 140px; width: 100%; float: left; margin-top: -10px;}
.mainMenu .guide .guide_box {float:left;}
.mainMenu .guide .guide_box .info{padding: 0 0 0 10px; overflow:hidden; float:right; margin:0; width: 61%;}
.mainMenu .guide .guide_box .info li{background: none;}
.mainMenu .guide .guide_box .info li:last-child{border-bottom:0}
.mainMenu .guide .guide_box .info li img{max-width: 20px; display: inline-block; float: left; margin: 5px 15px 0 0;}

/* footer
==========================================*/
#Top {bottom:50px;}
#Footer {background:#515456}
.f_logo{float: left; margin-top: 20px;}
.link{float: left;}
.footIn{padding: 0 30px;}
.footIn .link p {color:#c4c4c4}
.footIn .link p a {color:#9f9f9f; font-size: 13px;}
.footIn .link p span{padding: 0 5px; color: #989898;}

/* foot banner
==========================================*/
#Container .main + .banner {display:block;}
.banner {width:960px; margin:0 auto;  margin-bottom:20px; position:relative; display:none}
.bannerIn li {float:left; margin-right:13px}
.bannerIn li:nth-child(4n) {margin-right:0}
.bx-prev {top:40%; background:url('/image/prev.gif') no-repeat 0% center; display:block; position:absolute; left:-17px; width:7px; height:13px; text-indent:-9999px;}
.bx-next {top:40%; background:url('/image/next.gif') no-repeat 0% center; display:block; position:absolute; right:-17px; width:7px; height:13px; text-indent:-9999px;}


.fix_box {position:fixed; right:10px; top:55%; z-index:99}
.fix_box a {}
.fix_box a img {}




/* 반응형
==========================================*/
@media only screen and (max-width:999px) {
.banner {width:716px}
.fix_box {top:55%}
}

@media only screen and (max-width:970px) {
.mainMenu .notice {width:49%;}
.mainMenu .guide {width:49%; }
.contents {padding: 40px 30px;}
.contents > .contents{padding: 0px;}

#Gnb > ul > li {margin-left:25px;}
#Gnb > ul > li > a {font-size:18px; }
}

@media only screen and (max-width:959px) {
.main .visual{margin: 0px 30px 0 30px;}
.main .visual .bx-pager{margin-top: 25px;}
.mainMenu{margin-top: 20px;}
.mainMenu .notice {width:49%; height:190px}
.mainMenu .notice ul {margin-top:10px}
.mainMenu .guide {width:49%; height:190px}
.main .mainMenu > .mainMenu{padding: 0;}
.mainMenu .guide .guide_box .info{width: 66%; padding: 0;}
.footIn .link{padding: 30px 0px;}
}

@media only screen and (max-width:900px) {
	.mainMenu .notice {width:49%; height:200px}
	.mainMenu .guide {width:49%; height:200px}
}

@media only screen and (max-width:875px) {
	.mainMenu .guide .guide_box .info_img{display: none;}
	.mainMenu .guide .guide_box .info{width: 100%;}
	#Gnb {display:none; float:none; position:absolute; top:77px; left:0; z-index:60; width:100%; padding:0; background:#ffc107;}
	#Gnb > ul {float:none;}
	#Gnb > ul > li {float:none; margin:0;}
	#Gnb > ul > li > a {padding:12px 30px; border-top:1px solid #555; text-shadow:none; color:#fff; font-size:18px;}
	#Gnb > ul > li > a:first-child:hover{background: #ffc107;}
	#Gnb > ul > li:hover {background:#ffc107;}

	#Gnb .util {overflow:hidden; display:block; background:#f7f7f7; margin-bottom:0; padding:10px 0;}
	#Gnb .util a {display:block; float:left; width:30%; margin-left:2.5%; line-height:35px;}
	#Gnb .util a {background:#ffc107; padding:0; border-top:0; border-radius:5px; font-size:16px; color:#fff; text-align:center;}
	#Gnb .util a:first-child {background:#ffc107;}
	#Gnb .util select {display:none;}
	#Gnb .subBox {position:static; background:none; margin-left:0;}
	#Gnb .subMenu {display:block; width:100%; padding:0; background:#f9f9f9; border-top:0;}
	#Gnb .subMenu li a {padding:0 20px; border-top:1px dotted #8394b2; color:#555; font-size:16px; line-height:35px;}
	#Gnb .subMenu li:hover {background:none;}
	#Gnb .subMenu li a:hover{color: #000;}
	#Gnb .subMenu li:first-child a {border-top:0;}
	#Gnb .subMenu li a:before {content:"- ";}
	#Gnb .solution {overflow:hidden; display:none; padding:27px 0; background:#5773a5; border-top:1px solid #051850; text-align:center;}
	#Gnb .solution a {display:inline-block; zoom:1; *display:inline; width:30%; padding-top:90px; color:#fff; font-size:16px; font-weight:bold;}
	#Gnb .solution a.sol1 {background:url('../images/bg_sol1.png') no-repeat 50% 0;}
	#Gnb .solution a.sol2 {background:url('../images/bg_sol2.png') no-repeat 50% 0;}
	#Gnb .solution a.sol3 {background:url('../images/bg_sol3.png') no-repeat 50% 0;}
	#Gnb .util a {margin:1% 0 1% 2.5%;}
	#Gnb .util a.wide {width:95%; margin-top:10px;}
	#Gnb .subMenu {width:100%;}
	#Header {height:77px;}
	#Header .headIn .logo {padding-top:10px;}
	#Header .headIn .logo a {width:185px; height:59px; background-size:185px auto;}
	.gnbBtn {display:block; position:absolute; top:26px; right:30px; z-index:10; width:28px; height:20px; margin:0; padding:0; border:0; background:none; outline:none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
	.gnbBtn .bar {position:absolute; top:0; left:0; width:28px; height:2px; background-color:#000; transition: all .3s; -webkit-transition: all .3s;}
	.gnbBtn .bar.middle {top:8px;}
	.gnbBtn .bar.bottom {top:16px;}
	.gnbBtn.on .bar.top {top:9px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
	.gnbBtn.on .bar.middle {opacity:0;}
	.gnbBtn.on .bar.bottom {top:9px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
	.footIn .link p span {display: inline-block; padding-left:0;}
	.mainMenu .mainwrap {padding-top:0}
	.main .visual { padding-bottom:0}
	.fix_box  {display:none}
}

@media only screen and (max-width: 770px) {
	.banner {width:480px}
}

@media only screen and (max-width: 720px) {
	.consultant>li.topli img {float:none; margin-right:0}
	.consultant>li.topli {float:none}
	.consultant>li.topli>ul {float:none}
	.consultant>li {width:100%; float:none}
	.consultant {text-align:center}
}

@media only screen and (max-width:700px) {
	.mainMenu .notice {width:100%; height:auto;margin:0 0 20px 0}
	.mainMenu .guide {width:100%;height:auto; border-left:1px solid #d9d9d9}
}

@media only screen and (max-width:525px) {
	.mainMenu .notice ul {width:100%}
	.banner {width:230px}
}

@media only screen and (max-width:480px) {
	.mainMenu .notice ul li a {width:60%}
	.mainMenu .guide {background:none}
	.footIn .link{padding: 20px 0;}
}

@media only screen and (max-width: 420px) {
	.use table {width:100%}
	ul.img li {width:100%; margin-right:0}
    .mainMenu .notice h3, .mainMenu .guide h3 {font-size: 17px;}
}