@charset "utf-8";
/* 제작사 : D.LOFT - http://www.dloft.net/ */
/* 작성자 : 송지수 - jisuweb@mensakorea.org */
/* 작성일 : 2019.08.14 */
/* CSS Document */

/* 영역구분 */
#wrap {position:relative; overflow:hidden; width:100%; margin:0 auto; text-align:center;}
.wrap {display:inline-block; vertical-align:middle; position:relative; width:100% !important; max-width:1200px; margin:0 auto;}

.btn_secret {display:inline-block; position:absolute; left:0; bottom:0; width:0px; height:0px; font-size:0; margin:0; padding:0; border:none; background:none;}

.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%;}


/* 컬러 */
.cm {color:#1b4792 !important;}	/* 메인 */
.cs {color:#ffd200 !important;}	/* 서브 */
.ck {color:#000 !important;}	/* 검은색 */
.cw {color:#fff !important;}	/* 흰색 */
.cb {color:#222 !important;}	/* 어두운 회색 */
.cg {color:#666 !important;}	/* 옅은 회색 */
.ca {color:#999 !important;}	/* 밝은 회색 */


/* 타이틀 */
.title {display:inline-block; vertical-align:middle; font-size:30px; line-height:40px; word-wrap:normal; word-break:keep-all;}
.title.light, .title .light {font-weight:300;}
.title.medium, .title .medium {font-weight:500;}
.title.bold, .title .bold {font-weight:700;}
.title.semibold, .title .semibold {font-weight:800;}
.title.black, .title .black {font-weight:900;}
.title span {display:inline-block; vertical-align:middle; width:100%;}
.title.t1 {font-size:40px; line-height:50px; letter-spacing:6px;}
.title.t2 {font-size:35px; line-height:45px; letter-spacing:0px;}
.title.bar {position:relative; padding-bottom:5px;}
.title.bar:before {content:""; position:absolute; left:50%; bottom:0; width:40px; height:1px; margin-left:-20px; background-color:#1b4792;}
.left .title.bar:before {left:0; margin-left:0;}


/* 텍스트 */
.text {font-size:15px; font-weight:300; line-height:25px; word-wrap:normal; word-break:keep-all;}
.text.word, .text .word {word-break:break-all;}
.text.light, .text .light {font-weight:300;}
.text.medium, .text .medium {font-weight:500;}
.text.bold, .text .bold {font-weight:700;}
.text.semibold, .text .semibold {font-weight:800;}
.text.black, .text .black {font-weight:900;}
.text.giant, .text .giant {font-size:30px; line-height:40px;}
.text.big, .text .big {font-size:20px; line-height:30px;}
.text.middle, .text .middle {font-size:17px; line-height:27px;}
.text.small, .text .small {font-size:13px; line-height:23px;}
.text.tiny, .text .tiny {font-size:12px; line-height:22px;}
.text img {display:inline-block; vertical-align:middle; max-width:100%; margin:0;}
.text span, .text strong {display:inline-block; vertical-align:middle;}
.text input {display:inline-block; vertical-align:middle;}
.text label {cursor:pointer;}
.text.blank span, .text.blank strong {width:100%;}
.overflow {min-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}


/* 서식 */
.template {display:inline-block; vertical-align:middle; width:100%; text-align:left; word-wrap:normal; word-break:keep-all;}
.template > h4 {display:block; position:relative; width:auto; margin-top:40px; padding-left:20px; font-size:20px; font-weight:500; color:#201f2d; line-height:30px;}
.template > h4:first-child {margin-top:0;}
.template > h4:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-5px; border-radius:50%; border:#019eef solid 3px;}
.template > h5 {display:block; position:relative; width:auto; margin-top:30px; margin-left:20px; padding-left:15px; font-size:16px; font-weight:500; color:#201f2d; line-height:26px;}
.template > h5:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background-color:#20438f;}
.template > strong {display:block; position:relative; width:auto; margin-top:20px; margin-left:45px; font-size:14px; font-weight:700; color:#20438f; line-height:24px;}
.template > p {display:block; position:relative; width:auto; margin-top:10px; margin-left:45px; font-size:14px; font-weight:400; color:#565656; line-height:24px;}
.template > .box {margin-top:20px; margin-left:45px; padding:20px 25px; border:#e6e6e6 solid 1px; background-color:#f9f9f9; font-size:14px; font-weight:400; color:#565656; line-height:24px;}
.template strong {font-weight:500; color:#201f2d;}
.template a {color:#201f2d;}
.template a:hover {text-decoration:underline; text-decoration-color:rgba(0, 174, 239, 0.7);}
.template > ul {display:block; position:relative; width:auto; margin-top:10px; margin-left:45px; font-size:14px; font-weight:400; color:#565656; line-height:24px;}
.template > ul > li {position:relative; margin:5px 0; padding-left:10px;}
.template > ul > li:before {content:""; position:absolute; left:0px; top:11px; width:3px; height:3px; border-radius:50%; background-color:#8a8a8a;}
.template > ul > li > ul {display:block; position:relative; width:auto; margin:5px 15px; font-size:12px; font-weight:400; color:#8a8a8a; line-height:22px;}
.template > ul > li > ul > li {position:relative; padding-left:10px;}
.template > ul > li > ul > li:before {content:""; position:absolute; left:0px; top:11px; width:4px; height:1px; background-color:#8a8a8a;}
.template > ul > li > p {display:block; position:relative; width:auto; margin:5px 15px; padding-left:10px; font-size:12px; font-weight:400; color:#8a8a8a; line-height:22px;}
.template > ul > li > p:before {content:""; position:absolute; left:0px; top:10px; width:4px; height:1px; background-color:#8a8a8a;}
.template > .table {margin-top:10px; margin-left:45px;}


/* 데코 */
.deco {position:relative; padding-top:17px;}
.deco:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:6px; top:0; width:5px; height:14px; background:#20438f; transform:skewX(-30deg); -ms-transform:skewX(-30deg);}
.deco.cw:before {background:#fff;}
.deco.d1 {padding-top:0; padding-bottom:10px;}
.deco.d1:before {left:50%; top:auto; bottom:0px; width:30px; height:3px; margin-left:-15px; transform:none;}
.bgm {padding:0 5px; background:#20438f;}
.bgs {padding:0 5px; background:#ffd200;}
.line {border-style:solid; border-color:#e5e5e5;}
.line.bcm {border-color:#20438f;}
.line.bcs {border-color:#ffd200;}
.line.dashed {border-style:dashed;}
.line.dotted {border-style:dotted;}
.line.bt {border-top-width:1px;}
.line.bl {border-left-width:1px;}
.line.br {border-right-width:1px;}
.line.bb {border-bottom-width:1px;}

.bullet > li {position:relative; margin:10px 0; padding-left:10px;}
.bullet > li:before {content:""; position:absolute; left:0px; top:11px; width:3px; height:3px; border-radius:50%; background-color:#8a8a8a;}


/* 박스 */
.box {position:relative; background-color:#fff; box-shadow:0 0 20px rgba(0, 0, 0, 0.1);}
.box:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; bottom:-46px; width:980px; height:46px; margin-left:-490px; background-image:url("../images/common/shadow.png"); background-image:url("../images/ie/shadow.png")\9; background-repeat:no-repeat; background-position:center; background-size:100% auto;}
.box.t1 {padding:15px 20px; border:20px solid #f3f6f9; box-shadow:none;}
.box.t1:before {display:none;}


/* 텝 */
.tab {margin-bottom:20px; padding:5px; border:#ecf0f3 solid 1px; border-radius:5px; background:#f3f6f9; text-align:center;}
.tab ul {display:inline-block; vertical-align:middle;}
.tab li {display:inline-block; vertical-align:middle; float:left; margin:0 5px;}
.tab a {display:inline-block; vertical-align:middle; min-width:100px; padding:0 20px; border:#fff solid 1px; border-radius:2px; background:#fff; font-size:15px; font-weight:500; color:#20438f; line-height:40px; box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);}
.tab a:hover {border-color:#20438f;}
.tab a.on {border-color:#20438f; background:#20438f; color:#fff;}


/* 테이블 */
.table {width:100%; border-top:#20438f solid 1px;}
.table tr:first-child th, .table tr:first-child td {border-top:none;}
.table th {padding:10px 15px; border:#ecf0f3 solid 1px; background:#f3f6f9;}
.table td {padding:10px 15px; border:#ecf0f3 solid 1px;}
.table.top td {vertical-align:top;}
.table.t1 th {vertical-align:top;}
.table.t1 td {vertical-align:top;}
.table tr th.on {border-left:#20438f solid 5px; border-right:#20438f solid 5px; border-top:#20438f solid 5px; background:#20438f;}
.table tr td.on {border-left:#20438f solid 5px; border-right:#20438f solid 5px; border-bottom:#20438f solid 5px;}

/* 폼태그 */
.form {display:inline-block; vertical-align:middle; width:100%; text-align:left;}
.form .f_wrap {display:inline-block; vertical-align:middle; width:100%; padding:5px 0;}
.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 {position:absolute; left:0; top:0; height:50px; overflow:hidden; font-size:13px; color:#666; letter-spacing:0; line-height:50px; text-align:left;}
.form .f_field .ff_title label {position:relative;}
.form .f_field .ff_wrap {display:block; margin-left:100px !important;}
.form .f_field .ff_wrap.text {margin-top:5px;}
.form .f_field .ff_wrap.option {min-height:30px; margin:10px 0; line-height:30px;}
.form .f_field .ff_wrap.option span {margin-right:15px;}
.form .f_field .ff_wrap.option input {margin-right:5px;}
.form .f_field .ff_wrap.content {min-height:50px; margin-top:0; line-height:50px;}
.form .f_field input {display:inline-block; vertical-align:middle;}


/* 폼스타일 */
.input {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:50px; margin:0; padding:0; border:none; border-radius:10px; background-color:#f3f6f9;
	font-size:15px; color:#666; letter-spacing:0px; line-height:50px; text-align:left; text-indent:15px;}
.input:hover {background-color:#20438f; color:#fff;}
.select {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:50px; margin:0; padding:0; border:1px solid #e7e8e9; border-radius:10px; background-color:#fff;
	font-size:15px; color:#666; letter-spacing:0px; line-height:48px; text-align:left; text-indent:9px;}
.select:hover {border-color:#20438f; color:#20438f;}
.textarea {display:block; vertical-align:middle; box-sizing:border-box; width:100%; width:98%\9; min-height:50px; margin:0; padding:10px 15px; padding:5px 1%\9; border:none; border-radius:10px; background-color:#f3f6f9; text-align:left;}
.file {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:50px; margin:0; padding:10px 0; border:none; border-radius:10px; background-color:#f3f6f9;
	font-size:15px; color:#666; letter-spacing:0px; line-height:30px; text-align:left; text-indent:5px;}
.file:hover {background-color:#20438f; color:#fff;}

.input.w100 {width:100px;}
.input.w110 {width:110px;}
.input.w120 {width:120px;}
.input.w130 {width:130px;}
.input.w140 {width:140px;}
.input.w150 {width:150px;}
.input.w200 {width:200px;}
.input.w250 {width:250px;}
.input.w300 {width:300px;}


/* 버튼 */
.btn_wrap {display:inline-block; vertical-align:middle; width:100%; text-align:center;}
.btn_wrap ul {display:inline-block; vertical-align:middle; margin:0 auto; width:auto;}
.btn_wrap li {display:inline; float:left; margin:0 5px;}
.btn_wrap li:first-child {margin-left:0;}
.btn_wrap li:last-child {margin-right:0;}
.button {display:inline-block; vertical-align:middle; box-sizing:border-box; min-width:100px; height:40px; padding:0px 15px; border:#e7e8e9 solid 1px; background-color:#fff; font-size:15px !important; color:#666; line-height:38px !important; text-align:center; overflow:hidden; text-overflow:ellipsis;  word-break:break-all;}
.button:hover {border-color:#20438f; color:#20438f;}
.button.giant {min-width:140px; height:60px; padding:0px 40px; font-size:18px !important; line-height:58px !important;}
.button.big {min-width:120px; height:50px; padding:0px 30px; font-size:16px !important; line-height:48px !important;}
.button.small {min-width:80px; height:30px; padding:0px 10px; font-size:13px !important; line-height:28px !important;}
.button.calendar {min-width:40px; height:30px; padding:0px; font-size:13px !important; line-height:28px !important;}
.button.full {display:block; width:auto; padding:0;}
.button span {display:inline-block; vertical-align:top;}
.button.t1 {border-color:#787f84; background-color:#787f84; color:#fff;}
.button.t1:hover, .button.t1:focus {border-color:#43484b; background-color:#43484b; color:#fff;}
.button.t2 {border-color:#20438f; background-color:#20438f; color:#fff;}
.button.t2:hover, .button.t2:focus {border-color:#20438f; background-color:#20438f; color:#fff;}


/* 페이징 */
.pg_wrap {display:inline-block; vertical-align:middle; width:100%; margin-bottom:30px; text-align:center;}
.pg_wrap .pg {display:inline-block; vertical-align:middle;}
.pg_wrap a {display:inline-block; vertical-align:middle; min-width:28px; height:38px; margin:0 5px; padding:0 5px; border:#e6e6e6 solid 1px; font-size:14px; color:#201f2d; line-height:38px;}
.pg_wrap a:hover {border-color:#201f2d; background-color:#201f2d; color:#fff;}
.pg_wrap .pg_current {display:inline-block; vertical-align:middle; min-width:28px; height:38px; margin:0 5px; padding:0 5px; border:#20438f solid 1px; background-color:#20438f; font-size:14px; color:#fff; line-height:38px;}










@media all and (max-width:1240px) {
.wrap {max-width:1000px;}


/* 타이틀 */
.title {font-size:28px; line-height:38px;}
.title.t1 {font-size:38px; line-height:48px; letter-spacing:5px;}


/* 텍스트 */
.text {font-size:15px; line-height:25px;}
.text.giant, .text .giant {font-size:23px; line-height:33px;}
.text.big, .text .big {font-size:18px; line-height:28px;}
.text.middle, .text .middle {font-size:17px; line-height:27px;}
.text.small, .text .small {font-size:13px; line-height:23px;}
}










@media all and (max-width:1100px) {
.wrap {display:block !important; width:auto !important; max-width:auto !important; padding:0 20px;}


/* 타이틀 */
.title {font-size:26px; line-height:26px;}
.title.t1 {font-size:34px; line-height:34px;}


/* 텍스트 */
.text {font-size:14px; line-height:24px;}
.text.giant, .text .giant {font-size:25px; line-height:35px;}
.text.big, .text .big {font-size:18px; line-height:28px;}
.text.middle, .text .middle {font-size:15px; line-height:25px;}
.text.small, .text .small {font-size:12px; line-height:22px;}
.text.tiny, .text .tiny {font-size:11px; line-height:21px;}


/* 서식 */
.template > h4 {margin-top:30px; font-size:18px; line-height:28px;}
.template > h5 {margin-top:20px; font-size:15px; line-height:25px;}
.template > strong {margin-top:15px; font-size:13px; line-height:23px;}
.template > p {margin-top:5px; font-size:13px; line-height:23px;}
.template > .box {margin-top:15px; padding:15px 20px; font-size:13px; line-height:23px;}
.template > ul {margin-top:5px; font-size:13px; line-height:23px;}
.template > ul > li {margin:3px 0; padding-left:10px;}
.template > ul > li:before {top:10px;}
.template > ul > li > ul {margin:3px 12px;}
.template > ul > li > p {margin:3px 12px;}
.template > .table {margin-top:5px;}


/* 박스 */
.box:before {display:none;}


/* 텝 */
.tab a {min-width:90px; padding:0 15px; font-size:14px;}


/* 폼태그 */
.form .f_wrap {padding:2px 0;}
.form .f_field {width:100% !important;}
.form .f_field .ff_title {position:relative; left:auto; top:auto; height:30px; font-size:12px; line-height:30px;}
.form .f_field .ff_wrap {display:block; margin-left:0 !important;}
.form .f_field .ff_wrap.option {margin:5px 0;}
.form .f_field .ff_wrap.content {min-height:40px; line-height:40px;}


/* 폼스타일 */
.input {height:40px; font-size:14px; line-height:40px; text-indent:10px;}
.select {height:40px; font-size:14px; line-height:38px; text-indent:5px;}
.textarea {min-height:40px; padding:6px 10px;}
.file {height:40px; padding:5px 0; font-size:14px; line-height:20px;}


/* 버튼 */
.btn_wrap li {margin:0 3px;}
.button {min-width:80px; height:30px; padding:0px 10px; font-size:13px !important; line-height:28px !important;}
.button:hover {border-color:#20438f; color:#20438f;}
.button.giant {min-width:120px; height:50px; padding:0px 30px; font-size:16px !important; line-height:48px !important;}
.button.big {min-width:100px; height:40px; padding:0px 15px; font-size:15px !important; line-height:38px !important;}
.button.small {min-width:65px; height:25px; padding:0px 6px; font-size:12px !important; line-height:23px !important;}
.button.calendar {min-width:30px; height:25px; padding:0px; font-size:12px !important; line-height:23px !important;}
}









@media all and (max-width:768px) {
.wrap {padding:0 10px;}

/* 타이틀 */
.title {font-size:22px; line-height:32px;}
.title.t1 {font-size:32px; line-height:42px; letter-spacing:4px;}


/* 텍스트 */
.text.giant, .text .giant {font-size:20px; line-height:30px;}
.text.big, .text .big {font-size:16px; line-height:26px;}
.text.middle, .text .middle {font-size:15px; line-height:25px;}
.text.tiny, .text .tiny {font-size:11px; line-height:21px;}


/* 텝 */
.tab {margin-bottom:15px;}
.tab ul {width:100%; max-width:400px;}
.tab li {float:left; width:50%; margin:0;}
.tab a {display:block; min-width:auto; margin:5px; padding:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:break-all;}


/* 테이블 */
.table.t1 th {display:block; width:auto !important; padding:5px 10px; border-top:none;}
.table.t1 td {display:block; width:auto !important; padding:5px 10px; border-top:none;}


/* 박스 */
.box.t1 {padding:10px 15px; border-width:10px;}
}










@media all and (max-width:480px) {
/* 타이틀 */
.title {font-size:20px; line-height:30px;}
.title.t1 {font-size:30px; line-height:40px; letter-spacing:3px;}


/* 텍스트 */
.text.giant, .text .giant {font-size:18px; line-height:28px;}
.text.small, .text .small {font-size:12px; line-height:22px;}

/* 테이블 */
.table th {padding:4px 6px;}
.table td {padding:4px 6px;}

/* 버튼 */
.btn_wrap ul {width:100%;}
.btn_wrap li {width:100%; margin:2px 0;}
.btn_wrap li .button {min-width:100%; padding:0;}
}