@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* HTML normalize */
html{ height: 100%; overflow-x: hidden; overflow-y: scroll; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, article, aside, hgroup, header, footer, figure, figcaption, nav, section { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; }
article, aside, hgroup, header, footer, figure, figcaption, nav, section { display: block; }
body { font-family: 'Nanum Gothic','나눔고딕', sans-serif; font-size: 12px; color: #666; line-height: 1.6; -webkit-text-size-adjust:none; }
h1, h2, h3, h4, h5, h6 { font-weight:600; } 
ol, ul, li { list-style: none; zoom: 1 }
blockquote, q { quotes: none }
blockquote:before, blockquote:after,q:before, q:after { content:'' }
table { border-collapse: collapse; border-spacing: 0; table-layout: fixed }
button { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: transparent; overflow: visible; cursor: pointer; line-height: 1 }
textarea { resize: vertical; font: inherit; overflow-y: auto }
input, select { color: inherit; font: inherit }
address, i { font-style: normal }
table { border-collapse: collapse; table-layout: fixed }
img, select, input, button { vertical-align: middle }
em { font-style: normal }
img, fieldset {border: none }
hr {display: none }
a, a:link, a:visited, a:active {color: #666; text-decoration: none; font-family: 'Nanum Gothic','나눔고딕', sans-serif }
a:hover {color: #666; text-decoration: underline; font-family: 'Nanum Gothic','나눔고딕', sans-serif }
caption {width: 0; height: 0; line-height: 0; overflow: hidden; visibility: hidden; font-size: 0 }
legend {visibility: hidden; height: 0px; width: 0px; line-height: 0; _text-indent: -10px; font-size: 0px }

.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden}
.clfix {display: inline-block}
.clfix {display: block}
* html .clfix {height: 1%} /* Hides from IE-mac */
.clfix {zoom: 1} /*for IE 5.5-7*/
.fl {         float: left !important }
.flNone {     float: none !important }
.fr {         float: right !important }
.rel {        position: relative }
.ac {         text-align: center !important }
.ar {         text-align: right !important }
.al {         text-align: left !important }
.at {         vertical-align: top !important }
.am {         vertical-align: middle !important }
.ab {         vertical-align: bottom !important }
.hand {       cursor: pointer }
.bgnone {     background: none !important }
.brnone {     border: none !important }
.b {          font-weight: bold !important }
.n {          font-weight: normal !important }
.fwnor{       font-weight: normal !important }
.u {          text-decoration: underline !important }
.ls1{         letter-spacing: -1px !important }
.hide{        display: none }
.show{        display: block }
.disinbl{     display: inline-block; zoom:1; *display:inline }
.mt0{margin-top: 0 !important;}
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt40{margin-top: 40px !important;}

.pt10{padding-top: 10px !important;}

#accessibility, .blind, legend { font-size: 0; height: 1px !important; overflow: hidden !important; position: absolute !important; top: -9999px !important; width: 1px !important }

/* 스킵네비게이션 */
#accessibilityMenu {}
#accessibilityMenu a:link, #accessibilityMenu a:visited,
#accessibilityMenu a:active, #accessibilityMenu a:hover {position:absolute; top: -1000px; left: 0; width:100%; z-index:99999999; height:1px; color:#222; display:block; overflow:hidden; }
#accessibilityMenu a:focus, #accessibilityMenu a:hover,
#accessibilityMenu a:active {height:auto; padding:7px 0 5px; background-color:#e9e9e9; z-index:99999999; color:#000; text-decoration:none; font-weight:bold; text-align:center; top:0px; left:0;}

.inpType01{ border: 1px solid #e3e3e3; height: 28px; line-height: 28px; font-family: 'Nanum Gothic','나눔고딕', sans-serif; font-size: 12px; color: #878787; vertical-align: middle;
}
.selType01{ border: 1px solid #e3e3e3; height: 30px;  font-family: 'Nanum Gothic','나눔고딕', sans-serif; font-size: 12px; padding: 3px 0 6px;  color: #878787;vertical-align: middle;
}

/* btn */
.btnWrap{ margin-top: 30px; text-align: center; }


.btnType { display: inline-block; *zoom: 1; *display: inline; height: 38px; font-weight: 700; font-size: 13px; line-height: 38px; min-width: 170px; padding: 0 6px; text-align: center; vertical-align: middle; margin: 0 5px 10px;}
.btnType.type01 {border:1px solid #1e4c90; background-color: #2c5ea9; color: #fff;}
.btnType.type02 {border:1px solid #b8b8b8; background-color: #cdcdcd; color: #fff;}




.subTits.type03 {
    color: #444;
    font-size: 18px;
    padding: 25px 0 4px;
}

/**************************************************************************************
								layout & main
							.ie11 class = ie11 대응 클레스
**************************************************************************************/
/* 1024 Device (1024 이상 해상도에서 적용, ie8 이하에서 respond.js 늦게 실행되므로 1024 이상 디자인부터 작성 ) */

#payWrap{ width: 100%; }
#payWrap .topTitle { width: 100%; border-top: 6px solid #133c7a;  height: 213px; background: #f5f4f0; }
#payWrap .topTitle .inner{ max-width: 940px; margin: 0 auto; position: relative; }
#payWrap .topTitle .inner .txt{ position: absolute; left: 10px; top:70px; z-index: 2;padding-right: 10px;}
#payWrap .topTitle .inner .txt h1{ font-size: 26px; color: #133c7a; letter-spacing: -1px; line-height: 29px;}
#payWrap .topTitle .inner .txt p{ font-size: 32px; color: #252525; letter-spacing: -1px; font-weight: bold; line-height: 38px;}
#payWrap .topTitle .inner .img{ position: absolute; right: 0; top:0; z-index: 1}
#payWrap #payContainer{ max-width: 920px; margin: 0 auto; padding: 0 10px 60px;}
#payWrap #payContainer .topTitle h1{ font-size: 26px;}

.agBoxWrap { border-top: 2px solid #2c5ea9; margin-top: 5px;}
.agBoxWrap .agBox { border: 1px solid #e5e5e5; height: 240px; overflow-y: scroll; overflow-x:hidden; padding: 10px;}
.checkWrap { padding-top: 10px; text-align: right;}
.checkWrap label { padding-left: 6px;}

.stepArea{text-align: center}
.stepArea ul{display: inline-block; *zoom:1; *display:inline; padding-top: 30px;}
.stepArea ul li{display: inline-block; *zoom:1; *display:inline; vertical-align: middle; height: 136px; width: 188px; margin: 10px 0;}
.stepArea ul li.step01{background: url(/inc_pay/image/bg_step01_off.gif) no-repeat 0 0;}
.stepArea ul li.step01.on{background: url(/inc_pay/image/bg_step01_on.gif) no-repeat 0 0;}
.stepArea ul li.step01.on span{ color: #fff;}

.stepArea ul li.step02{background: url(/inc_pay/image/bg_step02_off.gif) no-repeat 0 0;}
.stepArea ul li.step02.on{background: url(/inc_pay/image/bg_step02_on.gif) no-repeat 0 0;}
.stepArea ul li.step02.on span{ color: #fff;}

.stepArea ul li.step03{background: url(/inc_pay/image/bg_step03_off.gif) no-repeat 0 0;}
.stepArea ul li.step03.on{background: url(/inc_pay/image/bg_step03_on.gif) no-repeat 0 0;}
.stepArea ul li.step03.on span{ color: #fff;}


.stepArea ul li > span { display: block; margin-right: 18px; color: #363636; font-size: 13px; }
.stepArea ul li > span strong { display: block; padding-top: 80px;font-weight: 700;}

.payDesc{ font-size: 14px; color: #000; padding: 34px 0 5px; border-bottom: 1px dashed #e5e5e5 }
.tits { font-size: 18px; color: #000; margin-top: 30px;}



.writeTbType01 {border-top: 2px solid #2c5ea9;margin-top: 15px;table-layout: fixed;width: 100%;}
.writeTbType01 tbody th {background: none repeat scroll 0 0 #f3f3f3;border-bottom: 1px solid #dadada;border-left: 1px solid #dadada;border-right: 1px solid #dadada;color: #434343;font-family: "Nanum Gothic",sans-serif;padding: 7px 0; text-align: left; padding-left: 15px;  word-wrap:break-word}
.writeTbType01 tbody td {border-bottom: 1px solid #dadada;border-right: 1px solid #dadada;font-family: "Nanum Gothic",sans-serif;padding: 7px 0 7px 10px;text-align: left; color: #878787;  word-wrap:break-word}

.inpW100{ vertical-align: middle; display: inline-block; *zoom: 1; *display: inline; width: 100px; }
.inpW100 input[type="radio"] { vertical-align:-4px}
.inpW100 label { vertical-align: middle; }

.inpW100.type02{ vertical-align: middle; display: inline-block; *zoom: 1; *display: inline; width: auto; padding-right: 27px; }



.desc02{ text-align: center; padding: 40px 0 10px;}
.desc02 p{ font-size: 14px; color: #676767; padding-top: 47px;}
.desc02 p strong{ font-size: 14px; color: #ba232f;}


.bxComplete{ margin-top: 40px; border: 1px solid #e3e3e3; border-top: 2px solid #2c5ea9; text-align: center; background: #fbfbfb url(/inc_pay/image/bg_cp.gif) no-repeat 50% 40px; padding-bottom: 54px;}
.bxComplete h2{ padding-top: 160px; font-size: 26px; color: #2c5ea9;}
.bxComplete .cpTxt01{color: #000; font-size: 18px; font-weight: 700; margin-top: 15px;}
.bxComplete .cpTxt01 strong{color: #ba232f;}
.bxComplete .cpTxt02{color: #676767; font-size: 15px;  margin-top: 15px;}
.bxComplete .cpTxt02 span{ text-decoration: underline;}
/* 해상도 940 이하 공통 css */
@media all and (max-width:960px) {
	#payWrap .topTitle .inner .txt{ position: absolute; left: 10px; top:70px; z-index: 2}
}




/* Tablet Device (사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다) */
@media all and (min-width:768px) and (max-width:1024px) {
	

}
@media all and (max-width:600px) {
	#payWrap .topTitle { height: auto; }
	#payWrap .topTitle .inner .txt{ position: static; padding: 20px 10px;}
	#payWrap .topTitle .inner .txt h1{ font-size: 22px;}
	#payWrap .topTitle .inner .txt p{ font-size: 28px; }
	#payWrap .topTitle .inner .img{ display: none;}
	.stepArea ul{display: block; *display: block;}
	.stepArea ul li{display: block; *display:block; height: 136px; width: auto; background-position: 50% 0 !important; }
	.stepArea ul li.on{ margin-left: 8px;}
	.stepArea ul li >span{margin-right: 0;}
}


/* Mobile Device(767이하 해상도에서 실행됨) */
@media all and (max-width:767px) {
	.writeTbType01 tbody th{padding: 0; text-align: center;}
}

@media all and (max-width:470px) {
	.desc02 .img img{ width:100%;}
}