@charset "utf-8";
/* CSS Document */

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


/* 컬러 */
.cm {color:#0c4da2 !important;}	/* 메인 */
.cs {color:#008f4c !important;}	/* 서브 */
.cy {color:#faa61a !important;}	/* 서브 */
.ck {color:#000 !important;}	/* 검은색 */
.cw {color:#fff !important;}	/* 흰색 */
.cg {color:#959494 !important;} /* 밝은회색 */
.cb {color:#231f20 !important;}	/* 진한 회색 */
.cr {color:#c43c3c !important;}	/* 서브 */



/* 타이틀 */
.title {font-size:16px; font-weight:700; line-height:30px; letter-spacing:-0.5px; word-wrap:normal; word-break:keep-all;}
.title.t1, .title .t1 {font-size:120px; line-height:110px;}

#contents.list_small .title {font-size:14px; line-height:28px;}
#contents.list_big .title {font-size:18px; line-height:32px;}
#contents.view_small {font-size:14px; line-height:28px;}
#contents.view_big {font-size:18px; line-height:32px;}


/* 텍스트 */
.text {font-size:14px; font-weight:400; line-height:24px; word-wrap:normal; word-break:keep-all;}
.text.word, .text .word {word-break:break-all;}
.text.thin, .text .thin {font-weight:100;}
.text.light, .text .light {font-weight:300;}
.text.medium, .text .medium {font-weight:500;}
.text.bold, .text .bold {font-weight:700;}
.text.black, .text .black {font-weight:900;}
.text.huge, .text .huge {font-size:30px; line-height:40px;}
.text.big, .text .big {font-size:20px; line-height:30px;}
.text.middle, .text .middle {font-size:16px; line-height:26px;}
.text.small, .text .small {font-size:12px; line-height:22px;}
.text img {display:inline-block; vertical-align:middle; width:auto; max-width:100%;}
.text a {color:#0c4da2; word-break:break-all;}

#contents.view_small .text {font-size:12px; line-height:22px;}
#contents.view_small .text.huge, .text .huge {font-size:28px; line-height:38px;}
#contents.view_small .text.big, .text .big {font-size:18px; line-height:28px;}
#contents.view_small .text.middle, .text .middle {font-size:14px; line-height:24px;}
#contents.view_small .text.small, .text .small {font-size:11px; line-height:21px;}

#contents.view_big .text {font-size:16px; line-height:26px;}
#contents.view_big .text.huge, .text .huge {font-size:32px; line-height:42px;}
#contents.view_big .text.big, .text .big {font-size:22px; line-height:32px;}
#contents.view_big .text.middle, .text .middle {font-size:18px; line-height:28px;}
#contents.view_big .text.small, .text .small {font-size:14px; line-height:24px;}


/* 서식 */
.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:30px; padding-left:20px; font-size:16px; font-weight:500; color:#0c4da2; 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:9px; width:6px; height:6px; border-radius:50%; border:#0c4da2 solid 3px;}
.template > strong {display:block; position:relative; width:auto; margin-top:20px; margin-left:25px; font-size:14px; font-family:'Noto Sans KR'; font-weight:500; color:#777; line-height:24px;}
.template > p {display:block; position:relative; width:auto; margin-top:10px; margin-left:25px; font-size:14px; font-family:'Noto Sans KR'; font-weight:400; color:#777; line-height:24px;}
.template > .box {margin-top:20px; margin-left:25px; padding:20px 25px; border:#e6e6e6 solid 1px; background-color:#f9f9f9; font-size:14px; font-family:'Noto Sans KR'; font-weight:400; color:#777; line-height:24px;}
.template strong {font-weight:500; color:#0e0e0e;}
.template a {color:#0e0e0e;}
.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:25px; font-size:14px; font-family:'Noto Sans KR'; font-weight:400; color:#777; 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:#999;}
.template > ul > li > ul {display:block; position:relative; width:auto; margin:5px 15px; font-size:12px; font-family:'Noto Sans KR'; font-weight:400; color:#999; 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:#999;}
.template > ul > li > p {display:block; position:relative; width:auto; margin:5px 15px; padding-left:10px; font-size:12px; font-family:'Noto Sans KR'; font-weight:400; color:#999; line-height:22px;}
.template > ul > li > p:before {content:""; position:absolute; left:0px; top:10px; width:4px; height:1px; background-color:#999;}
.template > .table {margin-top:10px; margin-left:25px;}


/* 테이블 */
.table {width:100%; border-top:#0c4da2 solid 1px;}
.table tr:first-child th, .table tr:first-child td {border-top:none;}
.table th {position:relative; padding:10px 15px; border-bottom:#eee solid 1px;}
.table th:before {content:""; position:absolute; left:0; top:50%; width:1px; height:16px; margin-top:-8px; background-color:#eee;}
.table th:first-child:before {display:none;}
.table td {width:100%; padding:10px 15px; border:#eee solid 1px;}
.table td:first-child {border-left:none;}
.table td:last-child {border-right:none;}

.table.t1 th {background-color:#0c4da2; color:#fff; border-bottom-color:#034293;}
.table.t1 td {border-color:#034293;}


/* 꾸밈요소 */
.bullet {position:relative; padding-left:10px;}
.bullet:before {content:""; position:absolute; left:0; top:50%; width:4px; height:14px; margin-top:-7px; border-radius:2px; background-color:#0c4da2;}

ul.bullet {padding-left:0;}
ul.bullet:before {display:none;}
ul.bullet > li {position:relative; margin-top:5px; padding-left:10px;}
ul.bullet > li:before {content:""; position:absolute; left:0; top:10px; width:4px; height:1px; background-color:#959494;}
ul.bullet > li:first-child {margin:0;}

.line {border-style:solid; border-color:#f5f5f5;}
.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;}

.icon {display:inline-block; vertical-align:-1px; position:relative; width:12px; height:12px; margin-right:2px; border-radius:10px; background-color:currentColor;}
.icon.caution:before {content:""; position:absolute; left:5px; top:2px; width:2px; height:5px; border-radius:2px; background-color:#fff;}
.icon.caution:after {content:""; position:absolute; left:5px; bottom:2px; width:2px; height:2px; border-radius:2px; background-color:#fff;}


/* 카테고리 */
.category {position:relative; height:50px; margin:10px; margin-top:0;}
.category select {display:inline-block; vertical-align:middle; position:relative; width:100%; height:50px; margin:0; padding:0 15px; border:none; border-radius:3px; background-color:#fff; box-shadow:0 5px 10px rgba(35, 31, 32, 0.04); font-size:15px; font-weight:700; color:#231f20; line-height:20px; letter-spacing:-0.5px; text-align:left; outline:none;}
.category_list {position:absolute; left:0; top:0; z-index:99; width:100%; border-radius:3px; background-color:#fff; box-shadow:0 5px 10px rgba(35, 31, 32, 0.04);}
.category_list button {display:inline-block; vertical-align:middle; position:relative; width:100%; height:50px; font-size:15px; font-weight:700; color:#231f20; line-height:20px; letter-spacing:-0.5px; text-indent:15px; text-align:left; outline:none;}
.category_list button:after {content:""; position:absolute; right:15px; top:50%; width:6px; height:6px; margin-top:-6px; border-right:#0c4da2 solid 2px; border-bottom:#0c4da2 solid 2px; transform:rotate(45deg); -ms-transform:rotate(45deg);}
.category_list button span {color:#0c4da2;}
.category_list > ul {display:none; overflow:auto; max-height:300px; padding:10px; border-top:#eee solid 1px;}
.category_list > ul > li {display:inline-block; vertical-align:middle; width:100%; box-shadow:inset 0 -1px 0 #f5f5f5;}
.category_list > ul > li:last-child {box-shadow:none;}
.category_list > ul > li > a {display:block; position:relative; width:auto; padding:10px; padding-left:10px; padding-right:40px; font-size:15px; font-weight:400; color:#231f20; line-height:20px; letter-spacing:-0.5px; text-align:left;}
.category_list > ul > li > a:after {content:""; position:absolute; right:12px; top:17px; width:7px; height:7px; border-right:#ccc solid 1px; border-bottom:#ccc solid 1px; transform:rotate(-45deg); -ms-transform:rotate(-45deg);}
.category_list > ul > li > a.on {background-color:#f5f5f5;} 
.category.on .category_list {box-shadow:0 20px 40px rgba(35, 31, 32, 0.1);}
.category.on .category_list > ul {display:block;}
.category.on .category_list button:after {margin-top:-3px; transform:rotate(-135deg); -ms-transform:rotate(-135deg);}


/* 탭 */
.tab {display:inline-block; vertical-align:middle; width:100%;}
.tab ul {display:table; width:100%;}
.tab li {display:table-cell;}
.tab.div2 li {width:50%;}
.tab.div3 li {width:33.333%;}
.tab.div4 li {width:25%;}
.tab a,
.tab button {display:inline-block; vertical-align:middle; position:relative; width:100%; height:50px; overflow:hidden; margin:0; padding:0; border:none; outline:none; background-color:#0c4da2; font-size:14px; font-weight:400; color:#fff; letter-spacing:-0.5px; line-height:50px; box-shadow:inset 1px 0 0 #034293;}
.tab a.on,
.tab button.on {background-color:#fff; font-weight:500; color:#0c4da2; box-shadow:none;}

.tab.t1 a,
.tab.t1 button {height:35px; background-color:#fff; font-size:13px; color:#0c4da2; line-height:35px; box-shadow:inset 1px 0 0 #f5f5f5;}
.tab.t1 a.on,
.tab.t1 button.on {background-color:#0c4da2; color:#fff; box-shadow:none;}

.tab.t2 a,
.tab.t2 button {height:35px; background-color:#fff; font-size:14px; color:#0c4da2; line-height:35px; box-shadow:inset 0 -1px 0 #f5f5f5;}
.tab.t2 a.on,
.tab.t2 button.on {background-color:#fff; font-weight:700; color:#0c4da2; box-shadow:inset 0 -2px 0 #0c4da2;}

/* 토글 */
.toggle01,
.toggle02 {display:none !important;}
button.toggle01,
button.toggle02 {display:inline-block !important;}
.toggle01.on,
.toggle02.on {display:inline-block !important;}

/* 박스 */
.box {position:relative; background-color:#fff; box-shadow:0 0 20px rgba(0, 0, 0, 0.1);}
.box.t1 {padding:30px; border:20px solid #f9f9f9; box-shadow:none;}
.box.t2 {padding:10px; border-radius:30px; background-color:#f5f5f5; box-shadow:none;}


/* 메뉴 */
.menu {display:inline-block; vertical-align:middle; position:relative; width:100%;}
.menu > ul {display:block; width:auto; margin:10px 20px;}
.menu > ul > li {display:inline-block; vertical-align:middle; position:relative; width:100%; padding:5px 0; border-bottom:#f5f5f5 solid 1px;}
.menu > ul > li:last-child {border:none;}
.menu > ul > li > a {display:block; position:relative; width:auto; padding:10px; padding-right:40px; font-size:15px; font-weight:400; color:#231f20; line-height:20px; letter-spacing:-0.5px; text-align:left;}
.menu > ul > li > a:before {content:""; position:absolute; left:0; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:2px; background-color:#0c4da2;}
.menu > ul > li > a:after {content:""; position:absolute; right:17px; top:17px; width:7px; height:7px; border-right:#ccc solid 1px; border-bottom:#ccc solid 1px; transform:rotate(-45deg); -ms-transform:rotate(-45deg);}


/* 협력사 */
.logos ul {border:#eee solid 1px; border-radius:5px;}
.logos li {padding:12px 0; border-bottom:#eee solid 1px;}
.logos li:last-child {border-bottom:none;}
.logos img {width:auto; height:34px;}
.logos a {display:inline-block; vertical-align:middle; width:100%;}


/* 폼태그 */
.form {display:inline-block; vertical-align:middle; width:100%; text-align:left;}
.form .f_field {display:inline-block; vertical-align:middle; position:relative; width:100%; margin-top:15px;}
.form .f_field:first-child {margin-top:0;}
.form .f_title {font-size:14px; font-weight:400; color:#231f20; letter-spacing:0; line-height:20px; text-align:left;}
.form .f_title label {position:relative; margin:0; padding-left:10px; font-weight:400;}
.form .f_title label:before {content:""; position:absolute; left:0; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:2px; background-color:#0c4da2;}
.form .f_wrap {display:inline-block; vertical-align:middle; position:relative; width:100%; margin-top:5px;}
.form .f_wrap span {display:inline-block; vertical-align:middle; padding:5px; font-size:14px; color:#231f20; letter-spacing:0px; line-height:30px;}
.form .f_wrap.f_btn {padding-right:115px;}
.form .f_wrap.f_btn .btn {position:absolute; right:0; top:0; width:110px; padding:0;}
.form .f_wrap.checkbox li {float:left; margin-right:5px;}
.form .f_txt {display:inline-block; vertical-align:middle; width:100%; margin-top:5px; padding:0 10px; line-height:20px !important;}

.checkbox input[type='checkbox'], .checkbox input[type='radio'] {display:none;}
.checkbox label {cursor:pointer;}
.checkbox label i {display:inline-block; vertical-align:middle; position:relative; float:left; width:20px; height:20px; margin:5px; margin-right:10px; overflow:hidden; border-radius:3px; background-color:#f5f5f5; transition:0.2s; -webkit-transition:0.2s;}
.checkbox label i:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:0; top:0; width:8px; height:4px; margin-left:5px; margin-top:6px; border-bottom:solid 2px currentColor; border-left:solid 2px currentColor; color:#959494; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transition:0.2s; -webkit-transition:0.2s;}
.checkbox input:checked + label i {background-color:#0c4da2;}
.checkbox input:checked + label i:before {color:#fff;}
.checkbox label span {display:inline-block; vertical-align:middle; font-size:14px; font-weight:400; color:#231f20; line-height:30px; transition:0.2s; -webkit-transition:0.2s;}
.checkbox label span:hover {color:#231f20;}
.checkbox label strong {font-weight:700;}

.checkbox.t1 label i {border-radius:10px; background-color:#e5e5e5;}
.checkbox.t1 label i:before {left:6px; top:6px; width:8px; height:8px; margin-left:0; margin-top:0; border-radius:5px; border:none; background-color:currentColor; color:#fff;}


/* 폼스타일 */
.input {display:block; vertical-align:middle; box-sizing:border-box; width:100%; height:40px; margin:0; padding:0; border:#e5e5e5 solid 1px; border-radius:3px; background-color:#fff;
	font-size:14px; color:#231f20; letter-spacing:0px; line-height:38px; text-align:left; text-indent:10px;}
.select {display:block; vertical-align:middle; width:100%; height:40px; margin:0; padding:0 6px; border:#e5e5e5 solid 1px; border-radius:3px; background-color:#fff;
	font-size:14px; color:#231f20; letter-spacing:0px; line-height:48px; text-align:left; text-indent:0;}
.textarea {display:block; vertical-align:middle; box-sizing:border-box; Width:100%; min-height:60px; margin:0; padding:5px 10px; border:#e5e5e5 solid 1px; border-radius:3px; background-color:#fff; text-align:left;}
.file {display:block; vertical-align:middle; width:100%; height:38px; margin:0; padding:10px 0; border:#e5e5e5 solid 1px; border-radius:3px; background-color:#fff;
	font-size:14px; color:#231f20; letter-spacing:0px; line-height:30px; text-align:left; text-indent:5px;}

.input.w50p {width:50%;}


/* 버튼 */
.btn_wrap {display:inline-block; vertical-align:middle; width:100%; text-align:center;}
.btn_wrap ul {display:table; width:100%;}
.btn_wrap li {display:table-cell; padding:0 5px;}
.btn_wrap li:first-child {padding-left:0;}
.btn_wrap li:last-child {padding-right:0;}
.btn {display:inline-block; vertical-align:middle; position:relative; box-sizing:border-box; height:40px; margin:0; padding:0px 20px; border:none; border-radius:3px; background-color:#0c4da2; font-size:14px; font-weight:700; color:#fff; line-height:40px; text-align:center; box-shadow:0 5px 10px rgba(35, 31, 32, 0.04); outline:none;}
.btn:active {background-color:#231f20; color:#fff; box-shadow:inset 0 10px 20px rgba(255, 255, 255, 0.1) , 0 10px 20px rgba(35, 31, 32, 0.1);}
.btn.t1 {width:100%; height:50px; background-color:#0c4da2; font-size:16px; line-height:50px;}
.btn.t2 {width:100%; height:50px; border:#eee solid 1px; background-color:#fff; font-size:16px; line-height:50px; color:#0c4da2;}
.btn.full {width:100%;}


/* 페이징 */
.paging {display:inline-block; vertical-align:middle; width:100%; margin-top:10px; padding-top:20px; padding-bottom:10px; border-top:#e5e5e5 solid 1px; text-align:center;}
.paging ul {display:inline-block; vertical-align:middle;}
.paging li {display:inline-block; vertical-align:middle; float:left;}
.paging a {display:inline-block; vertical-align:middle; min-width:36px; height:36px; margin:2px; padding:0 4px; border-radius:3px; background-color:#f0f0f0; font-size:12px; font-weight:500; color:#231f20; line-height:36px; text-align:center; overflow:hidden; text-overflow:ellipsis; word-break:break-all; transition:0.2s; -webkit-transition:0.2s;}
.paging a:active {background-color:#fff; box-shadow:0 4px 8px rgba(35, 31, 32, 0.08);}
.paging a.on {background-color:#0c4da2; font-weight:700; color:#fff;}


/* 팝업 */
.popup {position:fixed; left:0; right:0; top:-100%; bottom:100%; z-index:999999; width:auto !important; height:auto !important; background-color:rgba(35, 31, 32, 0.8);}
.popup.on {top:0; bottom:0;}
.popup .p_box {display:inline-block; vertical-align:middle; position:absolute; left:0; right:0; top:0; bottom:0; z-index:2; width:auto; height:auto; background-color:#fff; transform:scale(0.8); transition:0.4s; -webkit-transition:0.4s;}
.popup.on .p_box {transform:scale(1);}
.popup .p_head {display:inline-block; vertical-align:middle; position:fixed; left:0; right:0; top:0; z-index:999; height:60px; padding:10px; background-color:#0c4da2; box-shadow:0 5px 10px rgba(35, 31, 32, 0.06); transition:0.3s; -webkit-transition:0.3s;}
.popup .p_close {display:inline-block; vertical-align:middle; position:absolute; left:10px; top:10px; z-index:9; width:40px; height:40px; border-radius:20px; color:#fff;}
.popup .p_close:before {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:18px; height:2px; margin-top:-1px; margin-left:-8px; border-radius:2px; background-color:currentColor; transform:rotate(45deg); -ms-transform:rotate(45deg); transition:0.2s; -webkit-transition:0.2s;}
.popup .p_close:after {content:""; display:inline-block; vertical-align:middle; position:absolute; left:50%; top:50%; width:18px; height:2px; margin-top:-1px; margin-left:-8px; border-radius:2px; background-color:currentColor; transform:rotate(135deg); -ms-transform:rotate(135deg); transition:0.2s; -webkit-transition:0.2s;}
.popup .p_body {position:absolute; left:0; right:0; top:60px; bottom:0;overflow:auto; padding:20px;}
.popup .p_title {font-size:17px; font-weight:700; color:#fff; line-height:40px; text-align:center;}
.popup .btn.t1 {height:40px; font-size:15px; line-height:40px;}
.popup .btn.t2 {height:40px; font-size:15px; line-height:38px;}
.popup .slide .owl-dots {display:inline-block; vertical-align:middle; position:absolute; left:0; bottom:10px; width:100%;}
.popup .slide .owl-dot {display:inline-block; vertical-align:middle; width:20px; height:20px;}
.popup .slide .owl-dot span {display:inline-block; vertical-align:middle; width:6px; height:6px; margin:7px; border-radius:3px; background-color:#ddd;}
.popup .slide .owl-dot.active span {background-color:#0c4da2;}
.popup .slide .owl-nav div {display:inline-block; vertical-align:middle; position:absolute; bottom:10px; z-index:2; width:25px; height:25px; margin-top:-20px; border:#dedede solid 1px; background-color:#fff; font-size:0; line-height:0; text-indent:-9999px; transition:0.2s; -webkit-transition:0.2s;}
.popup .slide .owl-nav div:active {border-color:#0c4da2; background-color:#0c4da2;}
.popup .slide .owl-nav div:before {content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; margin-top:-4px; color:#231f20; border-top:solid 1px currentColor; border-right:solid 1px currentColor; transition:0.2s; -webkit-transition:0.2s;}
.popup .slide .owl-nav div:active:before {color:#fff;}
.popup .slide .owl-nav .owl-prev {left:10px;}
.popup .slide .owl-nav .owl-prev:before {margin-left:-2px; transform:rotate(-135deg); -ms-transform:rotate(-135deg);}
.popup .slide .owl-nav .owl-next {right:10px;}
.popup .slide .owl-nav .owl-next:before {margin-left:-7px; transform:rotate(45deg); -ms-transform:rotate(45deg);}
.popup .p_share ul {display:inline-block; vertical-align:middle; margin-top:15px;}
.popup .p_share li {display:inline-block; vertical-align:middle; float:left;}
.popup .p_share button {display:inline-block; vertical-align:middle; width:100px; margin:0; padding:0; border:none; background:none; outline:none;}
.popup .p_share button i {display:inline-block; vertical-align:middle; width:70px; height:70px; border-radius:35px; background-image:url("../images/common/icon_share_item.png"); background-repeat:no-repeat; background-size:100% auto;}
.popup .p_share button.ps_url i {background-color:#231f20;  background-position:center top;}
.popup .p_share button.ps_kakao i {background-color:#f9e000;  background-position:center bottom;}
.popup .p_share button span {display:inline-block; vertical-align:middle; width:100%; margin-top:5px; font-size:14px; font-weight:500; color:#231f20; line-height:30px; letter-spacing:-0.5px;}

.popup.t1 .p_box {left:20px; right:20px; top:20px; bottom:20px; border-radius:15px 15px 10px 10px;}
.popup.t1 .p_head {border-radius:10px 10px 0 0;}
.popup.t1 .p_close {left:auto; right:10px;}
.popup.t1 .p_title {text-align:left; text-indent:10px;}

.popup.t1.comment .p_box {left:20px; right:20px; top:50%; bottom:auto; height:160px; margin-top:-80px;}

.popup.t1.write .p_box {left:40px; right:40px; top:50%; bottom:auto; height:420px; margin-top:-190px;}

.popup.t1.write .menu > ul {position:relative;}
.popup.t1.write .menu > ul:before {content:"글쓰기는 새농민 회원부터 가능합니다."; position:absolute; left:0; right:0; top:0; padding:10px 0; font-size:15px; font-weight:400; color:#231f20; line-height:20px; letter-spacing:-0.5px; text-align:center; word-wrap:normal; word-break:keep-all;}
.popup.t1.write .menu > ul > li {background-color:#fff;}


.popup.t1.password .p_box,
.popup.t1.share .p_box {left:40px; right:40px; top:50%; bottom:auto; height:230px; margin-top:-115px;}