@charset "utf-8";
/* CSS Document */
/* 20161006 작성자 송지수 */


/* 영역구분 */
#wrap {position:relative; text-align:center; min-width:320px;}
.wrap {display:inline-block; vertical-align:middle; width:100%; min-width:320px; margin:0 auto;}

.area.div1 li, .area.div2 li, .area.div3 li, .area.div4 li, .area.div5 li, .area.div6 li, .area.div7 li, .area.div8 li, .area.div9 li, .area.div10 li, .area.div11 li, .area.div12 li {display:inline; float:left;}
.area.div1 li {width:100%;}
.area.div2 li {width:50%;}
.area.div3 li {width:33.333333%;}
.area.div4 li {width:25%;}
.area.div5 li {width:20%;}
.area.div6 li {width:16.666666%;}
.area.div7 li {width:14.285714%;}
.area.div8 li {width:12.5%;}
.area.div9 li {width:11.111111%;}
.area.div10 li {width:10%;}
.area.div11 li {width:9.090909%;}
.area.div12 li {width:8.333333%;}

.div2 {display:inline-block; vertical-align:middle; float:left; width:50%; box-sizing:border-box;}
.div3 {display:inline-block; vertical-align:middle; float:left; width:33.333333%; box-sizing:border-box;}
.div4 {display:inline-block; vertical-align:middle; float:left; width:25%; box-sizing:border-box;}
.div5 {display:inline-block; vertical-align:middle; float:left; width:20%; box-sizing:border-box;}
.div6 {display:inline-block; vertical-align:middle; float:left; width:16.666666%; box-sizing:border-box;}
.div7 {display:inline-block; vertical-align:middle; float:left; width:14.285714%; box-sizing:border-box;}
.div8 {display:inline-block; vertical-align:middle; float:left; width:12.5%; box-sizing:border-box;}
.div9 {display:inline-block; vertical-align:middle; float:left; width:11.111111%; box-sizing:border-box;}
.div10 {display:inline-block; vertical-align:middle; float:left; width:10%; box-sizing:border-box;}


/* 컬러 */
.cm {color:#0e6dc1;}	/* 메인 */
.ck {color:#000;}		/* 검은색 */
.cw {color:#fff;}		/* 흰색 */
.cb {color:#353c47;}	/* 어두운 회색 */
.cg {color:#b7bac1;}	/* 옅은 회색 */
.ca {color:#a4a5a9;}	/* 옅은 회색 */


/* 타이틀 */
.title {display:inline-block; vertical-align:middle; font-weight:400; font-size:18px; line-height:28px;}
.title.bold, .title .bold {font-weight:700;}
.title.t1 {font-size:30px; line-height:40px;}
.title.t2 {font-size:40px; line-height:50px;}
.title.t3 {font-size:50px; line-height:60px;}


/* 텍스트 */
.text {font-size:12px; font-weight:400; line-height:18px; word-wrap:normal;}
.text.bold, .text .bold {font-weight:700;}
.text.giant, .text .giant {font-size:16px; line-height:24px;}
.text.big, .text .big {font-size:15px; line-height:22px;}
.text.middle, .text .middle {font-size:13px; line-height:20px;}
.text.small, .text .small {font-size:11px; line-height:16px;}
.text.tiny, .text .tiny {font-size:10px; line-height:15px;}
.text img {display:inline-block; vertical-align:middle; max-width:100%; margin:0;}
.text span {display:inline-block; vertical-align:middle;}
.text input {display:inline-block; vertical-align:middle;}
.text label {cursor:pointer;}
.overflow {min-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}
.img img {max-width:100%;}


/* 단계 */
.step {display:inline-block; vertical-align:middle; width:100%; text-align:center;}
.step ul {display:inline-block; vertical-align:middle; overflow:hidden; box-sizing:border-box; width:100%; border:#0e6cc0 solid 1px; border-radius:3px;}
.step li {display:inline; float:left;}
.step div {display:block; position:relative; height:28px; margin-right:-1px; font-size:12px; color:#0e6cc0; letter-spacing:-1px; line-height:28px; text-align:center;}
.step div.on {position:relative; color:#fff;}
.step div:before {content:""; position:absolute; left:-12px; bottom:6.5px; width:17px; height:1px; background-color:#0e6cc0; transform: rotate(-60deg);}
.step div:after {content:""; position:absolute; left:-12px; top:6.5px; width:17px; height:1px; background-color:#0e6cc0; transform: rotate(60deg);}
.step li:first-child div:before {display:none;}
.step li:first-child div:after {display:none;}
.step div.on:before {content: ""; position:absolute; left:-9px; top:-1px; z-index:2; width:50%; height:0px; border-left:9px solid transparent; border-right:9px solid transparent; border-top: 15px solid #0e6cc0; border-bottom: 15px solid #0e6cc0;  background-color:transparent; transform: rotate(0);}
.step div.on:after {content: ""; position:absolute; left:100%; top:-1px; z-index:2; width:2px; height:0px; margin-left:-9px; border-left:9px solid #0e6cc0; border-top: 15px solid #fff; border-bottom: 15px solid #fff;  background-color:transparent; transform: rotate(0);}
.step span, .step strong {display:block; position:relative; z-index:3; margin:0 9px 0 6px;}
.step div.on span, .step div.on strong {background-color:#0e6cc0; box-shadow:1px 0 1px #0e6cc0;}
.step li:first-child div.on:before {display:block; border-left-color:#0e6cc0;}
.step li:first-child div.on:after {display:block;}
.step li:last-child div.on:after {border-top-color:#0e6cc0; border-bottom-color:#0e6cc0;}

/* 탭 */
.tab {display:inline-block; vertical-align:middle; width:100%; text-align:center;}
.tab ul {display:inline-block; vertical-align:middle; width:100%;}
.tab li {display:inline; float:left;}
.tab a {display:block; height:28px; margin-right:-1px; border:#0e6cc0 solid 1px; font-size:12px; color:#0e6cc0; line-height:28px; text-align:center;}
.tab a:hover, .tab a.on {position:relative; background-color:#0e6cc0; color:#fff;}
.tab li:first-child a {border-radius:3px 0 0 3px;}
.tab li:last-child a {border-radius:0 3px 3px 0;}

.step.div1 li, .tab.div1 li {width:100%;}
.step.div2 li, .tab.div2 li {width:50%;}
.step.div3 li, .tab.div3 li {width:33.333333%;}
.step.div4 li, .tab.div4 li {width:25%;}
.step.div5 li, .tab.div5 li {width:20%;}
.step.div6 li, .tab.div6 li {width:16.666666%;}
.step.div7 li, .tab.div7 li {width:14.285714%;}
.step.div8 li, .tab.div8 li {width:12.5%;}
.step.div9 li, .tab.div9 li {width:11.111111%;}
.step.div10 li, .tab.div10 li {width:10%;}
.step.div11 li, .tab.div11 li {width:9.090909%;}
.step.div12 li, .tab.div12 li {width:8.333333%;}


/* 라인 */
.line.bt {border-top:#c4c4c4 solid 1px;}
.line.bl {border-left:#c4c4c4 solid 1px;}
.line.br {border-right:#c4c4c4 solid 1px;}
.line.bb {border-bottom:#c4c4c4 solid 1px;}
.line.bcm {border-color:#0e6dc1;}
.line.bcb {border-color:#6d707f;}
.line.bca {border-color:#eaeaea;}
.line.bw2 {border-width:2px;}
.line.bw3 {border-width:3px;}
.line.bw4 {border-width:4px;}
.line.bw5 {border-width:5px;}
.line.bw10 {border-width:10px;}
.line.dot {border-style:dotted;}
.line.dashed {border-style:dashed;}


/* 박스 */
.box {background:#fff;}
.box.t1 {border:#c4c4c4 solid 1px;}
.box.t2 {border:#eaeaea solid 1px;}
.box.t3 {border:#dddce1 solid 1px;}
.box.bt {border-top:none;}
.box.bl {border-left:none;}
.box.br {border-right:none;}
.box.bb {border-bottom:none;}
.box.bgw, .box .bgw {background-color:#fff;}
.box.bga, .box .bga {background-color:#f8f8f8;}
.box.bgm, .box .bgm {background-color:#0e6dc1;}
.box.bgg, .box .bgg {background-color:#f0f0f0;}


/* 폼태그 */
.form {display:inline-block; vertical-align:middle; width:100%;}
.form .f_wrap {display:inline-block; vertical-align:middle; width:100%;}
.form .f_field {display:inline-block; vertical-align:middle; float:left; position:relative; width:100%;}
.form .f_field.div1 {width:100%;}
.form .f_field.div2 {width:50%;}
.form .f_field.div3 {width:33.333333%;}
.form .f_field.div4 {width:25%;}
.form .f_field.div5 {width:20%;}
.form .f_field.div6 {width:16.666666%;}
.form .f_field.div7 {width:14.285714%;}
.form .f_field.div8 {width:12.5%;}
.form .f_field.div9 {width:11.111111%;}
.form .f_field.div10 {width:10%;}
.form .f_field .ff_title {margin-bottom:6px; border-bottom:#6d7180 solid 1px; font-size:13px; color:#353c47; letter-spacing:0; line-height:22px; text-align:left;}
.form .f_field:hover .ff_title {border-bottom-color:#0e6dc1;}
.form .f_field .ff_wrap {display:block;}
.form .f_field input {display:inline-block; vertical-align:middle;}


/* 폼스타일 */
.input {display:block; vertical-align:middle; width:100%; height:38px; box-sizing:border-box; margin:0; padding:0; border:none; background-color:#fff;
	font-size:12px; color:#353c47; letter-spacing:0px; line-height:36px; text-align:left; text-indent:10px;}
.select {display:block; vertical-align:middle; width:100%; height:36px; box-sizing:border-box; margin:0; padding:0; border:none; background-color:#fff;
	font-size:12px; color:#353c47; letter-spacing:0px; line-height:36px; text-align:left; text-indent:10px;}
.select2 {vertical-align:middle; width:100%; height:36px; box-sizing:border-box; margin:0; padding:0; border:none; background-color:#fff;
	font-size:12px; color:#353c47; letter-spacing:0px; line-height:36px; text-align:left; text-indent:10px;}
.textarea {display:block; vertical-align:middle; width:100%; min-height:68px; box-sizing:border-box; margin:0; padding:5px 10px; border:1px solid #dddce1; background-color:#fff;
	font-size:12px; color:#353c47; letter-spacing:0px; line-height:20px; text-align:left;}
.file {display:block; vertical-align:middle; width:100%; height:38px; box-sizing:border-box; margin:0; padding:0 0; border:1px solid #dddce1; background-color:#fff;
	font-size:12px; color:#353c47; letter-spacing:0px; line-height:36px; text-align:left; text-indent:2px;}
.input.t1 {border:1px solid #dddce1;}
.input.t2 {border:1px solid #dddce1; background-color:#efefef;}
.input.t3 {border:1px solid #86b5df; color:#0055a8;}
.select.t1 {height:26px; border:1px solid #dddce1; border-radius:2px; line-height:26px;}


/* 버튼 */
.btn_wrap {display:inline-block; vertical-align:middle; width:100%; text-align:center;}
.btn_wrap ul {display:inline-block; vertical-align:middle; width:100%;}
.btn_wrap li {float:left; display:inline; padding:0 5px; box-sizing:border-box;}
.btn_wrap li:first-child {padding-left:0;}
.btn_wrap li:last-child {padding-right:0;}
.btn_wrap .div2 li {width:50%;}
.btn_wrap .div3 li {width:33.333333%;}
.btn_wrap .div4 li {width:25%;}
.btn_wrap .div5 li {width:20%;}
.btn_wrap .div6 li {width:16.666666%;}
.btn_wrap .div7 li {width:14.285714%;}
.btn_wrap .div8 li {width:12.5%;}
.btn_wrap .div9 li {width:11.111111%;}
.btn_wrap .div10 li {width:10%;}
.btn_wrap.t1 li {display:inline; float:left; position:relative; font-size:12px; color:#777; line-height:35px;}
.btn_wrap.t1 li:after {content:""; position:absolute; left:0; bottom:9px; width:1px; height:12px; background-color:#caccd1;}
.btn_wrap.t1 li:first-child:after {display:none;}
.btn_wrap.t1 a {display:block; font-size:12px; color:#353c47; letter-spacing:0; line-height:30px;}

.btn {display:inline-block; vertical-align:middle; height:37px; padding:0px 25px; border:none; border-radius:2px; background-color:#6d7180; font-size:13px; color:#fff; letter-spacing:2px; line-height:37px; text-align:center; box-shadow:inset 0 -2px 0 #484c5a;}
.btn:hover {background-color:#606473; box-shadow:inset 0 -2px 0 #3d414f;}
.btn.t1 {background-color:#0e6cc0; box-shadow:inset 0 -2px 0 #004e94;}
.btn.t1:hover {background-color:#0761b2; box-shadow:inset 0 -2px 0 #004380;}
.btn.t2 {background-color:#d14451; box-shadow:inset 0 -2px 0 #981724;}
.btn.t2:hover {background-color:#c33542; box-shadow:inset 0 -2px 0 #8e101d;}
.btn.t3 {background-color:#bcbcbc; box-shadow:inset 0 -2px 0 #9d9ea0;}
.btn.t3:hover {background-color:#a7a7a7; box-shadow:inset 0 -2px 0 #898b8e;}
.btn.small {height:26px; padding:0px 15px; font-size:11px; letter-spacing:0; line-height:26px;}
.btn.tiny {height:21px; padding:0px 15px; font-size:11px; letter-spacing:0; line-height:21px;}
.btn.full {display:block; width:100%; padding:0;}
.btn.wide {width:145px; padding:0;}


/* 페이징 */
.paging {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; text-align:center;}
.paging .p_wrap {display:inline-block; vertical-align:middle; font-size:0;}
.paging .p_wrap a {display:inline-block; vertical-align:middle; min-width:11px; margin:0 2px; padding:0 5px; border:#c4c4c4 solid 1px; font-size:12px; color:#b7bac1; line-height:21px;}
.paging .p_wrap span {display:inline-block; vertical-align:middle; min-width:11px; margin:0 5px; padding:0 5px; border:#c4c4c4 solid 1px; font-size:12px; color:#b7bac1; line-height:21px;}
.paging .p_wrap a:hover, .paging .p_wrap .on {border-color:#0e6cc0; background-color:#0e6cc0; color:#fff;}