@charset "utf-8";

/*공통*/
#contentWrap {max-width:1280px; margin:0 auto}
#contentWrap:after {content:''; clear:both; display:block}
#contents_body strong {color:#000; font-weight:500}
#contents_body div.tstyle_view {margin-top:-51px}

#footer {margin-top:50px}

.s_tit {font-size: 1.2rem; margin-bottom: 0.5rem; display: block; position:relative; padding-left:1.5rem; margin-left: 0.4rem;}
.s_tit:before,.s_tit:after {content:''; display:inline-block; position:absolute;}
.s_tit:before {width:15px; height:15px; background-color:#BA6223; transform:rotate(45deg); top:7px;left:0;}
.s_tit:after {background-color: #fff; width: 6px; height: 6px; left: 5px; top: 11px; transform: rotate(45deg);}

/* sub visual*/
.sub_visual {background:#2c1a1f url(/namdofood/img/contents/sub-visual01.jpg) no-repeat center top; height:300px; position:relative}
.sub_visual .txt {text-align:center; padding:170px 0 0 0}
.sub_visual .txt span {font-family:'NotoKrM'; color:#fff; font-size:1.7em; display:inline-block; word-break:keep-all; letter-spacing:-1px; text-shadow:1px -1px 5px #000; animation-duration:1s; animation-fill-mode: both; animation-name: slideInUp;}

/* snb */
#snb{float:left; width:19.532%}
#snb h2.title{background:url(/namdofood/img/contents/snb-bg.gif) repeat; color:#fff; font-size:1.8rem; font-weight:normal; text-align:center; padding:70px 0 40px; position:relative}
#snb h2.title:before {content:''; position:absolute; left:50%; top:40px; background:url('/namdofood/img/common/icon-all.png') no-repeat 0 0; width:50px; height:17px; margin-left:-25px}
#snb .list > ul > li {background:#fff; border-bottom:1px solid #e6e6e6}
#snb .list > ul > li > a{color:#666; display:block; padding:14px 25px; position:relative}
#snb .list > ul > li > a:before {content:''; background:#4b5578; height:1px; width:0; position:absolute; left:0; bottom:-1px; transition:all .3s}
#snb .list > ul > li > a:hover:before {width:100%}
#snb .list > ul > li > a:after {content:''; border-top:1px solid #001b47; border-right:1px solid #001b47; width:7px; height:7px; transform:rotate(135deg); position:absolute; right:20px; top:50%; margin-top:-1px}
#snb .list > ul > li.active > a:after{border-color:#fff; transform:rotate(-45deg)}
#snb .list > ul > li:hover > a{color:#4b5578}
#snb .list > ul > li.active > a {background:#4b5578; color:#fff}
#snb .list ul ul {background:#f9fafc; padding-top:14px}
#snb .list ul ul li a {color:#666; display:block;font-weight:300; padding:0 25px 14px 35px; position:relative}
#snb .list ul ul li:hover a,
#snb .list ul ul li.active a {color:#4b5578; text-decoration:underline}
#snb .list ul ul li a:before {content:''; background:#666; width:5px; height:1px; position:absolute; left:23px; top:9px}
#snb .list ul ul li:hover a:before,
#snb .list ul ul li.active a:before  {background:#4b5578}

/*content*/
#contents{color:#444; float:right;  width:75%; position:relative; min-height:500px; word-break: keep-all; line-height:170%}

/* none */


/* ctt & location */
.contents_util {border-bottom:1px solid #384162; position:relative; padding:42px 0; margin-bottom:50px}
.contents_util #contents_title {color:#333; font-weight:normal; font-size:2rem; line-height:2.5rem; text-align:center; margin-bottom:10px}
.contents_util .location ul {clear:both; overflow:hidden; text-align:center}
.contents_util .location ul li {font-size:0.9rem; display:inline-block; margin-right:17px; position:relative; vertical-align:middle}
.contents_util .location ul li:after {content:''; border-top:1px solid #999; border-right:1px solid #999; position:absolute; right:-12px; top:50%; width:5px; height:5px; margin-top:-3px; transform:rotate(45deg)}
.contents_util .location ul li:last-child:after {content:none}
.contents_util .location ul li:last-child{margin-right:0}
.contents_util .location ul li.icon a{color:rgba(19,98,160,1); display:block; font-size:0; position:relative}
.contents_util .location ul li.icon a:before {content:"\e90e"; color:#000; font-family:'icomoon' !important;  font-size:20px; display:inline-block; vertical-align:-10px}
.contents_util .location ul li a:hover {color:rgba(19,98,160,1)}
.contents_util .nav-depth {display:none;}
.contents_util .util {display:none}

/*depth4 탭메뉴 */
#depth4_menu_div {margin:-51px 0 30px}
#depth4_menu_div ul {border-top:1px solid #384162; border-bottom:1px solid #c3c6d0; display:table; width:100%; position:relative; margin-top:50px}
#depth4_menu_div ul:after{content:''; clear:both; display:block}
#depth4_menu_div ul li{display:table-cell; position:relative}
#depth4_menu_div ul li:last-child:after {content:none}
#depth4_menu_div ul li a{color:#666; display:block; text-align:center; padding:0.9em 0; position:relative}
#depth4_menu_div ul li.active a{color:#fff}
#depth4_menu_div ul li.active a:after {content:''; background:#4b5578; color:#000; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1}
#depth4_menu_div ul li.active + li {display:none;}


/* 콘텐츠 하단 정보 */
.contents_info {position:relative; margin-top:50px; padding:15px 30px; width:100%; border:1px solid #e5e5e5;}
.contents_info .title {font-size:15px; font-weight:400;}
.contents_info .title strong {display:none;}
.contents_info .cont {position:relative;}
.contents_info .txt {position:absolute; top:-26px; left:120px; font-size:15px;}
.contents_info .txt::before {content:"["}
.contents_info .txt::after {content:"]"}
.contents_info .txt span:nth-child(1) strong {color:#e20101 !important}
.contents_info .txt span:nth-child(2)::before {content:"/";margin-right:3px;}

.contents_info #s_form {clear:both; overflow:hidden; width:100%}
.contents_info #s_form fieldset {width:100%}
.contents_info #s_form .select {display:none;}
.contents_info #s_form .list {float:left; padding:5px 0; width:48%}
.contents_info #s_form .list li {display:inline-block; font-size:0.9em; margin-right:5px;}
.contents_info #s_form .list li.form_radio input {position:static; opacity:1;}
.contents_info #s_form .list li label {letter-spacing:-1px; vertical-align:-1px; font-size:13.5px; padding-left:0;}
.contents_info #s_form .list li label::before {display:none;}
.contents_info #s_form .list li label::after {display:none;}
.contents_info #s_form p.form {float:left; position:relative; width:52%}
.contents_info #s_form p.form input.form_textbox {font-size:0.8em; float:left; width:75%; height:40px; padding:0 50px 0 10px; box-sizing:border-box;}
.contents_info #s_form p.form input.btn {cousor:pointer; float:left; width:25%; height:40px; background:#fff; border:1px solid #a9a9a9; border-left:0; cursor:pointer; color:#444; font-size:13px; padding:0 10px}
.contents_info #s_form p.form .length {display:block; font-size:0.8em; position:absolute; top:8px; right:28%}

/* 콘텐츠 담당자 */
.contents_info div.duty-wrap {background:#f8f8f8; border-bottom:0; clear:both; overflow:hidden; width:100%; padding:10px}
.contents_info div.duty-wrap div.duty span {float:left; margin-right:20px}
.contents_info div.duty-wrap div.duty dl {float:left}
.contents_info div.duty-wrap div.duty dl dt {font: 0px/0 Arial;  height: 0; left: -9999px !important; position: absolute !important; top: -9999px !important; visibility:hidden}
.contents_info div.duty-wrap div.duty dl dd {display:inline-block; font-size:0.9em; padding-right:8px}
/*최근업데이트*/
.contents_info div.duty-wrap div.duty_date {float:right; margin-top:-1px}
.contents_info div.duty-wrap div.duty_date strong, .contentInfo div.duty_date span {font-size:0.9em; font-weight:normal; display:inline-block; vertical-align:middle}
.contents_info div.duty-wrap div.duty_date strong:after {content:':'; display:inline-block; padding:0 5px}


/* 참여 후 멘트 */
#satisfy-wrap .txtMent {padding:6px 0 4px; margin:5px 0 0}
#satisfy-wrap .txtMent strong {font-weight:500}

/* 하단 QR */
.qr-wrap {text-align:right}
.qr-wrap img {width:80px}

/* 공공누리 */
.codeView {border:1px solid #dbdbdb; display:table; width:100%; padding:10px 0}
.codeView img, .codeView span {display:table-cell; vertical-align:middle; padding:0 10px}

/* 사이트 맵 */
.sitemap dl {padding:50px 0; border-bottom:1px solid #e5e5e5}
.sitemap dl:first-child {padding:0 0 50px 0}
.sitemap dl:last-child {border-bottom:0}
.sitemap dt a {color:#295392; font-size:1.6em}
.sitemap dd {clear:both; padding:30px 0 0}
.sitemap dd > ul {display:table; width:100%}
.sitemap dd > ul > li {display:inline-block; margin-right:2em; line-height:2em; position:relative; vertical-align:top}
.sitemap dd > ul > li:last-child {margin-right:0}
.sitemap dd > ul > li > a {color:#000; font-size:1em}
.sitemap dd > ul > li > a:hover {color:#295392; text-decoration:underline}
.sitemap dd > ul > li ul > li {display:block; margin-right:2%}
.sitemap dd > ul > li ul > li a {color:#666; font-size:0.9em; position:relative; padding:0 0 0 10px}
.sitemap dd > ul > li ul > li a:before {content:''; background:#666; position:absolute; left:1px; top:10px; width:5px; height:1px}
.sitemap dd > ul > li ul > li a:hover {color:#295392; text-decoration:underline}


/************* 콘텐츠 ***************/
/* 1depth */
h2.dep01, ul.dep01 > li{display:block; color:#9d6c55; font-size:1.7rem; font-weight:normal; position:relative; padding:10px 0 15px 0; margin:30px 0 0 0; line-height:160%}
h2.dep01:first-child, ul.dep01 > li:first-child{margin:0}

/* 2depth */
ul.dep02 > li > ul {padding:15px 0}
h3.dep02, ul.dep02 > li {color:#000; display:block; font-size:1.25rem; font-weight:normal; position:relative; padding:0 0 7px 33px; line-height:150%}
h3.dep02:before, ul.dep02 > li:before {content:''; background:url('/namdofood/img/contents/bul02.gif') no-repeat center top; position:absolute; left:0; top:4px; width:24px; height:24px}

/* 3depth */
ul.dep03 {padding:0 0 20px 0}
ul.dep03 li > ul {padding:15px 0}
h4.dep03, ul.dep03 > li, span.dep03 {color:#000; display:block; font-weight:normal; position:relative; padding:0 0 0 15px; line-height:160%}
h4.dep03:before, ul.dep03 > li:before, span.dep03:before {content:''; background:#666; position:absolute; left:2px; top:10px; width:3px; height:5px}

/* 4depth */
ul.dep04 li > ul {padding:15px 0}
h5.dep04, ul.dep04 > li, span.dep04 {color:#000; display:block;font-weight:normal; position:relative; padding:0 0 7px 15px; line-height:160%}
h5.dep04:before, ul.dep04 > li:before, span.dep04:before {content:''; background:#666; position:absolute; left:1px; top:12px; width:5px; height:1px}

/* 5depth */
ul.dep05 li > ul {padding:15px 0}
h6.dep05, ul.dep05 > li {color:#666; display:block; font-size:0.9rem; font-weight:normal; position:relative; padding:0 0 7px 10px; line-height:160%}
h6.dep05:before, ul.dep05 > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 2depth 로 시작*/
ul.dep02 > li > ul {padding:10px 0 0; margin-left:-33px}
ul.dep02 > li > ul > li{color:#000; display:block;  position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep02 > li > ul > li:before {content:''; border:0; background:#666; position:absolute; left:0; top:10px; width:3px; height:5px}
ul.dep02 > li > ul > li > ul {padding:10px 0 0}
ul.dep02 > li > ul > li > ul > li {color:#000; display:block;position:relative; padding:0 0 7px 15px; line-height:160%}
ul.dep02 > li > ul > li > ul > li:before {content:''; background:#666; position:absolute; left:1px; top:10px; width:5px; height:1px}
ul.dep02 > li > ul > li > ul > li > ul {padding:10px 0 0}
ul.dep02 > li > ul > li > ul > li > ul > li{color:#666; display:block; position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep02 > li > ul > li > ul > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 3depth 로 시작*/
ul.dep03 > li > ul {padding:3px 0 7px 0}
ul.dep03 > li > ul > li {color:#000; display:block; position:relative; padding:0 0 0 15px; line-height:160%}
ul.dep03 > li > ul > li:before {content:''; background:#666; position:absolute; left:1px; top:10px; width:5px; height:1px}
ul.dep03 > li > ul > li > ul {padding:10px 0 0}
ul.dep03 > li > ul > li > ul > li{color:#666; display:block; position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep03 > li > ul > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/* 4depth 로 시작*/
ul.dep04 > li > ul {padding:10px 0 0}
ul.dep04 > li > ul > li{color:#666; display:block;  position:relative; padding:0 0 7px 10px; line-height:160%}
ul.dep04 > li > ul > li:before {content:''; background:#999; position:absolute; left:1px; top:11px; width:2px; height:2px}

/*콘텐츠 탭*/
#con-tab {display:table; width:100%; position:relative; margin-top:50px}
#con-tab:after{content:''; clear:both; display:block}
#con-tab .tab-article > div{padding:90px 0 0 0}
#con-tab .tab-article > span {border-top:1px solid #384162; border-bottom:1px solid #c3c6d0; display:block; position:absolute; left:0; top:0; width:50%}
#con-tab .tab-article:last-of-type > span:after {content:none}
#con-tab .tab-article > span.tt02 {left:50%}
#con-tab .tab-article > span a {color:#666; display:block; text-align:center; padding:0.9em 0; position:relative}
#con-tab .tab-article > span a.selectd{color:#fff}
#con-tab .tab-article > span a.selectd:after {content:''; background:#4b5578; color:#000; width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1}

/*기본알림*/
.info {color:#666; display:inline-block; font-size:14px; padding-left:20px; position:relative}
.info:before {content:'※'; width:17px; height:19px; position:absolute; left:0; top:0}

/*경고알림*/
.spa-info {color:#c15f18; font-size:15px; font-weight:500; display:block; padding-left:23px; position:relative}
.spa-info:before {content:'※'; color:#fff; font-size:12px; background:#c15f18; border-radius:100px; width:19px; height:19px; position:absolute; left:0; top:3px; line-height: 20px; text-align:center}

/*마커 (형광펜)*/
.marker {position:relative}
.marker:after {content:''; background:rgba(249, 215, 117, 0.5); width:102%; height:90%; position:absolute; left:-2px; bottom:0; z-index:-1}

/* 테이블 공통 */
.table table{position:relative}
.table table:before {content:''; background:#666; width:100%; height:1px; position:absolute; left:0; top:0}

.txt_center {text-align:center;}

/*테이블 thead*/
.tbl_type1 {border-collapse:collapse; width:100%; line-height:160%; margin-bottom:10px}
.tbl_type1 thead th,
.tbl_type1 tbody th {background:#f5f5f5; border-bottom:1px solid #e6e6e6; border-right:1px solid #e6e6e6; color:#000; font-weight:normal; text-align:center; padding:13px 5px}
.tbl_type1 tbody td{border-bottom:1px solid #e6e6e6; border-right:1px solid #e6e6e6; color:#333; font-size:1em; padding:0.6em}
.tbl_type1 tbody td ul li, .tbl_type1 tbody td span {color:#333; font-size:1em; padding-bottom:0}
.tbl_type1 thead tr th.line-r {border-right:1px solid #e6e6e6 !important}
.tbl_type1 thead tr th:last-child,
.tbl_type1 tbody tr td:last-child {border-right:none}
.tbl_type1 tbody tr td.line-r {border-right:1px solid #e6e6e6}

/*테이블 tbody*/
.tbl_type2 {border-collapse:collapse; border-bottom:1px solid #666; margin:10px 0 15px 0; width:100%}
.tbl_type2 tbody th{background:#f7f7f7; border-top:1px solid #ddd; border-right:1px solid #ddd; color:#666; padding:0.6em; text-align:center}
.tbl_type2 tbody td{border-top:1px solid #ddd; border-right:1px solid #ddd; color:#666; text-align:center; padding:0.6em}
.tbl_type2 tbody tr:first-child th,
.tbl_type2 tbody tr:first-child td{border-top:2px solid #666 !important}
.tbl_type2 td.no_border{border-right:none; text-align:left;}


/*테이블안 이미지*/
.tbl_type2 tbody tr td img{margin:0 auto; display:block}

/*공통사용*/
.con-section {display:table; width:100%; margin-bottom:3%}
.con-section .article-left, .con-section .article-right {display:table-cell; vertical-align:top}
.con-section .article-left img {margin:0 auto}

.con-section .article {display:block; margin:2% 0 0 0}/* 텍스트 콘텐츠 그룹 */
.article {margin-bottom:5%}/* 텍스트 콘텐츠 부분 */
.custom-box .section {font-size:1.2rem}/*전통문양박스*/
/* depth 사이에 알림박스*/
.con-explain {background:#f8f8f8; color:#444; padding:25px; position:relative; margin-bottom:20px}
.con-explain:before {content:''; background:#384162; width:2px; height:100%; position:absolute; left:0; top:0}
.box-gray {background:#f6f6f6; width:100%; padding:3%}/*기본 회색박스*/

/* 사진형식 리스트 ex)심볼,관광명소 */
.content-list li {border:1px solid #e5e5e5; display:table; margin-top:-1px; padding:2.2%; width:100%}
.content-list li > div {display:table-cell; vertical-align:top}
.content-list li .txt {width:77%; padding:2.5% 5% 0 0}
.content-list li .thumb {width:23%; vertical-align:middle}
.content-list li .thumb img {display:block}
.content-list li strong {color:#4b5578; display:block; font-size:1.1em; font-weight:500; margin-bottom:5px}
.content-list li span {font-size:0.95em; display:block}
.content-list li .txt .h5 {padding-bottom:3%}

/* 절차 */
.step-list {display:table; width:100%; table-layout:fixed; margin-bottom:20px}
.step-list li {padding-left:2.5%; display:table-cell; position:relative}
.step-list li:first-child{padding-left:0}
.step-list li div {border:1px solid #e6e6e6; border-radius:5px; background:#f9f9f9; color:#333; font-size:0.95em; padding:15px; text-align:center; width:100%; height:100px}
.step-list li:nth-child(5n+5) {margin-right:0}
.step-list li strong {color:#d16d0c; font-weight:normal; display:block; padding-bottom:10px}
.step-list li span {font-size:0.95em}
.step-list li:after {content:''; background:#e6e6e6; width:50px; height:1px; position:absolute; left:97%; top:50%; z-index:-1}
.step-list li:last-child:after {content:none}

/*Button Box*/
span.custom-btn {display:inline-block; position:relative; margin:30px 0 10px; transition:all .3s}
span.custom-btn:before, span.custom-btn:after {content:''; border:1px solid #4b5578; width:7px; height:7px; position:absolute; transition:all .3s; z-index:2}
span.custom-btn:before {left:-4px; top:-4px}
span.custom-btn:after {right:-4px; top:-4px}
span.custom-btn a{background:#fff; color:#4b5578; border:1px solid #4b5578; display:block; font-size:0.95em; padding:10px 50px; position:relative; transition:all .3s}
span.custom-btn a:before, span.custom-btn a:after {content:''; border:1px solid #4b5578; width:7px; height:7px; position:absolute; transition:all .3s}
span.custom-btn a:before {left:-4px; bottom:-4px}
span.custom-btn a:after {right:-4px; bottom:-4px}
span.custom-btn:hover a {background:#4b5578; color:#fff; border:1px solid #4b5578}
span.custom-btn:hover:before, span.custom-btn:hover:after,
span.custom-btn:hover a:before, span.custom-btn:hover a:after {border:1px solid #4b5578}

/*콘텐츠 포토 슬라이더*/
.photo-article {position:relative; margin-top:30px;}
.photo-article .bxslider img {display:block; width:100%;}
/*작은사진*/
.photo-article #bx-pager,.photo-article .bx-pager {width:100%; margin:10px 0 30px; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px;}
.photo-article #bx-pager a,.photo-article .bx-pager a {position:relative; display:block; aspect-ratio:4/3;}
.photo-article #bx-pager a img,.photo-article .bx-pager a img {display:block; width:100%; height:100%; padding:0; opacity:1; object-fit:cover;}
.photo-article #bx-pager a:hover::before,
.photo-article #bx-pager a.active::before,
.photo-article .bx-pager a:hover::before,
.photo-article .bx-pager a.active::before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}

/*컨트롤 버튼*/
.photo-article .bx-controls {position:absolute; left:0; top:35%; width:100%}
.photo-article .bx-controls-direction {max-width:1280px; margin:0 auto}
.photo-article .bx-controls-direction a {background:rgba(0,0,0,0.5); color:transparent; text-indent:-10000px; font-size:0;width:60px; height:60px; position:absolute; transition:all .3s}
.photo-article .bx-controls-direction a:hover {background:rgba(0,0,0,1)}
.photo-article .bx-controls-direction a:before {content:''; border-top:1px solid #ddd; border-right:1px solid #ddd; width:15px; height:15px; position:absolute; left:50%; top:50%;  margin:-7px 0 0 -2px}
.photo-article .bx-controls-direction a.bx-prev {left:0}
.photo-article .bx-controls-direction a.bx-prev:before  {transform:rotate(-135deg); left:45%}
.photo-article .bx-controls-direction a.bx-next{right:0}
.photo-article .bx-controls-direction a.bx-next:before  {transform:rotate(45deg); margin-left:-13px}


/* 페이지,검색영역*/
div.board_info {clear:both; font-size:14px; overflow:hidden; position:relative; margin-top:35px; margin-bottom:25px; display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:center;}
div.board_info .page {color:#666; margin-top:8px}
div.board_info .page b,
div.board_info .page strong {font-weight:400}
div.board_info .page .current {padding-left:0.5rem;}
div.board_info .Search {float:right; text-align:right; width:450px}
div.board_info .Search .search-form {display:flex; flex-direction:row;}
div.board_info .Search .form {display:flex; flex-direction:row; width:100%;}
div.board_info .Search a.icon_rss {display:none}
div.board_info fieldset {clear:both; display:flex; flex-direction:row; width:100%; position:relative; overflow:hidden;}
div.board_info fieldset .search-form { display:flex; flex-direction:row; width:100%;}
div.board_info fieldset select,
div.board_info fieldset input,
div.board_info fieldset button {background-color:#fff; border:1px solid #ddd; border-right:0; border-radius:0; display:block; width:100%; height:100%; padding:0 5px}
div.board_info fieldset span {display:table-cell; height:40px; margin-left:-4px; vertical-align:middle}
div.board_info fieldset span:first-of-type {margin-left:0}
div.board_info fieldset span.select {flex:none; width:150px;}
div.board_info fieldset span.form-select {flex:none; width:150px;}
div.board_info fieldset .form_select {flex:none; width:150px;}
div.board_info fieldset span.input {flex:1;}
div.board_info fieldset .form-input{flex:1;}
div.board_info fieldset .item.type1 {flex:1;}
div.board_info fieldset span.btn {width:50px;}
div.board_info fieldset .item.type1.btn {flex:none; width:50px;}
div.board_info fieldset span.btn span {display:block; width:100%;}
div.board_info fieldset span.btn span:last-child {display:none;}
div.board_info fieldset span.btn span.reset {display:none;}
div.board_info fieldset span.btn span.write {display:none;}
div.board_info fieldset span.btn button {background-color:#353c47; border:1px solid #353c47; color:#fff; cursor:pointer; font-size:0; position:relative; transition:background .2s; vertical-align:top}
div.board_info fieldset span.btn button:after {content:''; color:#fff; display:block; font-family:'xeicon' !important; font-size:20px}
/*div.board_info fieldset span.form-btn button:before {content:''; position:absolute; top:11px; left:50%; margin-left:-6px; background:url('/kor/img/common/icon-search.png') no-repeat; width:14px; height:16px}*/
div.board_info fieldset span.btn button:hover,div.board_info fieldset button:focus {background-color:#404759}

div.board_info.food_lecture fieldset .form-select {width:100px;}




/* 게시판 */
div.board-list {border-top:1px solid #666; border-bottom:1px solid #e4e4e4;}
div.board-list table { font-size:14px;}
div.board-list table thead {border-bottom:1px solid #bfbfbf;}
div.board-list table thead th {padding:10px 5px; background:#f9f9f9; border-right:1px solid #DCD9D9; font-weight:500; color:#000;}
div.board-list table thead th:last-child {border-right:none;}
div.board-list table tbody tr {border-bottom:1px solid #DCD9D9;}
div.board-list table tbody tr:last-child {border-bottom:none;}
div.board-list table tbody td {padding:5px 5px;  border-right:1px solid #DCD9D9; text-align:center;}
div.board-list table tbody tr td:last-child {border-right:none;}
div.board-list table tbody tr td.txt_left {text-align:left;}
div.board-list table tbody tr td.txt_left a {max-width:480px; overflow:hidden; display:block; text-overflow:ellipsis; white-space:nowrap;}
div.board-list table tbody tr td .xi-new::before {content:"N"; display:inline-flex; justify-content:center; align-items:center; margin-right:5px; width:18px; height:18px; background:#4b5578; font-size:80%; color:#fff; border-radius:100%;}
div.board-list table tbody tr td .sr_only {display:none;}
div.board-list ._blank {padding:10px 5px; text-align:center;}

@media screen and (max-width:768px) {

	div.board_info {flex-direction:column-reverse; align-items:flex-start; gap:1rem; margin:20px 0;}
	div.board_info .page {margin-top:0;}
	div.board_info .Search {width:100%;}
	div.board_info fieldset span.select {width:30%;}
	div.board_info fieldset .form_select {width:30%;}
	div.board_info fieldset span.input {flex:1;}
	div.board_info fieldset .item.type1 {flex:1;}
	div.board_info fieldset span.btn {width:50px;}


	div.board-list table .m_hidden {display:none;}


}
@media screen and (max-width:640px) {
	div.board-list table {width:100%; table-layout:fixed;}
	div.board-list table colgroup {display:none;}
	div.board-list table thead {display:none;}
	div.board-list table tbody tr {display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:0.5rem 1rem; width:100%; padding:10px; overflow:hidden;}
	div.board-list table tbody td {overflow:hidden; display:block; border:none; padding:0;}
	div.board-list table tbody td.txt_left {width:100%; flex:none;}
	div.board-list table tbody tr td.txt_left a {max-width:100%;}
}


/* 갤러리 게시판 */
ul.gallery_list {padding:25px 0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:25px;}
ul.gallery_list li a {display:block; border:1px solid #e4e4e4; transition:0.3s;}
ul.gallery_list li a .thumb {display:flex; aspect-ratio:16/9;}
ul.gallery_list li a .thumb img {width:100%; height:100%; object-fit:cover;}
ul.gallery_list li a .desc {display:block; padding:15px;}
ul.gallery_list li a .desc .title {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:3px;}
ul.gallery_list li a .desc .title .xi-new::before {content:"N"; display:inline-flex; justify-content:center; align-items:center; margin-right:5px; width:18px; height:18px; background:#4b5578; font-size:80%; color:#fff; border-radius:100%;}
ul.gallery_list li a .desc .title .xi-new .sr_only {display:none;}
ul.gallery_list li a .desc .date {font-size:13px;}
ul.gallery_list li a .desc .date .label {display:none;}
ul.gallery_list li a .desc .hit {display:none;}

@media screen and (min-width:1025px) {
    ul.gallery_list li a:hover {transform:translateY(-10px); box-shadow:0px 4px 5px 2px rgba(0, 0, 0, 0.1);}
}
@media screen and (max-width:768px) {
	ul.gallery_list {grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media screen and (max-width:480px) {
	ul.gallery_list {grid-template-columns:repeat(1, minmax(0, 1fr));}
}

/* 홍보영상 */
div.board_list {border-top:1px solid #666; border-bottom:1px solid #e4e4e4;}
div.board_list .blank {padding:10px 5px; text-align:center;}
.board_pager a.total {display:none;}
.board_pager a.active {background:#333;color:#fff !important}
.board_pager a.active strong { color:#fff !important}
.board_pager a.arr {font-size:0;}
.board_pager a.arr:before{font-size:12px; font-weight:bold; font-family:'icomoon' !important; line-height:19px}
.board_pager a.arr.first:before{content:'\e910'}
.board_pager a.arr.prev:before{content:'\e90f'}
.board_pager a.arr.next:before{content:'\e924'}
.board_pager a.arr.last:before{content:'\e926'}
.board_pager a.pageNow strong {color:#fff !important;}


/* faq */
.faqType {border-top:1px solid #666; border-bottom:1px solid #e4e4e4; font-size:14px;}
.faqType ._blank {padding:10px; text-align:center;}
.faqType .group {word-break:keep-all}
.faqType .group + .group {border-top:1px solid #e6e6e6}
.faqType .group .label {color:#333; font-weight:bold; display:block; position:relative; cursor:pointer;}
.faqType .group .label .title {display:block; padding:1rem; width:100%; }
.faqType .group .label .title::before {content:"Q."; margin-right:5px;}
.faqType .group .label::after {position:absolute; right:3rem; top:50%; font-family:'xeicon'; font-weight:400; color:#999; content:''; -webkit-transition:all 0.2s; transition:all 0.2s; transform: translateY(-50%)}
.faqType .group .item { height:0; opacity:0; visibility:hidden; overflow:hidden; background-color:#f7f7f7; line-height:1.6; width:100%; position:relative; padding:0 2rem}
.faqType .group .item::before {content:"A."; position:absolute; left:15px; top:15px;}
.faqType .desc {background-color:#f8f8f8; border-radius:0.5rem; font-size:1.4rem; line-height:1.6; margin:0.5rem 0 1rem; padding:1.5rem 2rem}
.faqType .desc * {font-size:1.4rem}
.faqType .group.active .label::after {-webkit-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%) rotate(180deg)}
.faqType .group.active .item {visibility:visible; overflow:visible; height:auto; opacity:1; border-top:1px solid #eee; padding-top:2.5rem; padding-bottom:2.5rem; transition:all 0.2s;}
@media screen and (min-width:1025px) {

	.faqType .group .label:hover {background:#f7f7f7;}
}

/* 블로그형 */
.board_list:has(.blog_list) {border-bottom:none;}
.board_list .blog_list {padding-top:30px;}
.board_list .blog_list li + li {margin-top:20px;}
.board_list .blog_list li {border:1px solid #ddd; transition:0.3s;}
.board_list .blog_list li a {display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; gap:20px; height:100%;}
.board_list .blog_list .thumb {overflow:hidden; flex:none; width:300px; max-height:200px; }
.board_list .blog_list .thumb img {width:100%; height:100%; object-fit:cover; vertical-align:middle;}
.board_list .blog_list .desc {flex:1; padding:30px 20px 30px 0; max-height:100%; display:flex; flex-direction:column;}
.board_list .blog_list .desc .title { font-size:19px; font-weight:600; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; word-break:break-word; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.board_list .blog_list .desc .date {display:block;}
.board_list .blog_list .desc .date.sdate {margin-top:auto;}
.board_list .blog_list .desc .date .label {display:inline-block; width:80px;}

@media screen and (min-width:1025px) {
	.board_list .blog_list li:hover {box-shadow:0 0 10px rgba(0,0,0,0.19);}
}
@media screen and (max-width:768px) {
	.board_list .blog_list .thumb {width:250px;}
}
@media screen and (max-width:580px) {
	.board_list .blog_list li a {flex-direction:column; gap:0;}
	.board_list .blog_list .thumb {width:100%; max-height:inherit; aspect-ratio:4/3;}
	.board_list .blog_list .desc {padding:25px;}
	.board_list .blog_list .desc .title {font-size:17px; margin-bottom:20px;}
}


/* 수강신청 */
/*Board View*/
div.tstyle_view {border-top:1px solid #666; font-size:14px; margin-bottom:30px}
div.tstyle_view div.title {background:#f9f9f9; color:#333; clear:both; font-size:1.6em; line-height:1.6em; font-weight:500; padding:25px 20px; text-align: center}

div.tstyle_view div.title .type {font-size:1.2rem; padding:0 10px; margin-right:10px; color:#fff; background:#b14065; border-radius:100px;}
div.tstyle_view div.title .type.finish {background:#543b67}
div.tstyle_view div.title .type.end {background:#3b4567}


div.tstyle_view ul.head {background:#f9f9f9; border-top:1px solid #e4e4e4; border-bottom:1px solid #bfbfbf; width:100%; text-align:center}
div.tstyle_view ul.head li {display:inline-block; margin-left:-4px; padding:10px}
div.tstyle_view ul.head li strong {font-weight:500; position:relative; padding-right:5px}
div.tstyle_view ul.head li strong:after {content:':'; padding-left:5px; vertical-align:1px}
div.tstyle_view div.tb_contents {clear:both; font-size:15px; padding:20px; border-bottom:1px solid #e2e3e6; line-height:normal; min-height:150px; word-break:break-all}
div.tstyle_view div.tb_contents .player video {width:100% !important}



.food_lecture_view li + li {border-top:1px dotted #eee;}
.food_lecture_view li {display:flex; flex-direction:row; justify-content:flex-start; padding:10px 0 10px 20px; position:relative;}
.food_lecture_view li::before {content:""; position:absolute; left:0; top:19px; width:6px; height:6px; background:#ddd; border-radius:100%;}
.food_lecture_view li strong {width:100px;}
.food_lecture_view li .btn-line {margin-left:0;}

/*view-type2 ex)대표 > 소통광장 > 정보화교육 > 교육일정 및 접수*/
div.tstyle_view ul.type2 {padding:15px 20px}
div.tstyle_view ul.type2 li {padding:5px; text-align:left; width:50%}

/*Board View /*대표 > 소통광장 > 정보화교육 > 교육일정 및 접수 글보기*/
.education_view {border-top:1px solid #ddd; clear:both; overflow:hidden}
.education_view li {float:left; width:50%; display:table}
.education_view li strong {min-height:46px; background:#f9f9f9; border-bottom:1px solid #ddd; border-right:1px solid #ddd; color:#333; float:left; font-weight:500; text-align:left; line-height:150%; padding:12px 15px; width:30%}
.education_view li span{min-height:46px; border-bottom:1px solid #ddd; color:#666; float:left; text-align:left; line-height:150%; padding:12px 15px; width:70%; vertical-align:middle}



/* 게시판 뷰 */
.board_view {margin-top:-50px;}
.board_view h2.title {background:#f9f9f9; color:#333; clear:both; font-size:1.6em; line-height:1.6em; font-weight:500; padding:25px 20px; text-align: center}
.board_view .info {display:flex; flex-direction:row; align-items:center; justify-content:center; gap:0.3rem 1rem; flex-wrap:wrap; padding:10px; background:#f9f9f9; border-top:1px solid #e4e4e4; border-bottom:1px solid #bfbfbf; }
.board_view .info::before {display:none;}
.board_view .info li strong::after {content:":"; margin-right:3px;}
.board_view .contents {padding:20px; border-bottom:1px solid #e2e3e6;}

.board_view .contents.video .youtube {aspect-ratio:16/9;}

.board_view .file {border-bottom:1px solid #919191;}
.board_view .file .title {display:none;}
.board_view .file .list {}
.board_view .file .list li + li {border-top:1px dashed #e2e3e6;}
.board_view .file .list li {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; flex-wrap:wrap; padding:9px 15px;}
.board_view .file .list li img {margin-right:10px;}
.board_view .file .list li a {margin-right:10px;}
.board_view .file .list li .txt {font-size:12px; color:#999;}
.board_view .file .list li .link {margin-left:auto;}
.board_view .file .list li .link .btn_line {border:1px solid #b3b3b3; display:inline-block; font-size:14px; height:28px; line-height:28px; margin-left:5px; padding:0 7px; vertical-align:middle; position:relative}
.board_view .file .list li .link .btn_line:after {font-family:'xeicon'; content:'\e90a'; font-size:13px; margin-left:3px;}

/* 게시판 하단 버튼 */
.board_btns {display:flex; flex-direction:row; justify-content:flex-end; margin-top:40px;}
.board_btns button.btn {background:#464646; border:0; color:#fff; cursor:pointer; font-size:14px; font-family:inherit; height:40px; padding:0 15px}
@media screen and (min-width:1025px) {
    .board_btns button.btn:hover {background:#000; border-color:#000; color:#fff; transition:all .2s}
}

/* 본인인증 (예약조회) */
.member_info {margin-bottom:40px; background:#fafafa url("/namdofood/img/contents/icon_certification.gif") no-repeat 40px center; padding:50px 20px 50px 190px;}
.member_info strong {display:block; margin-bottom:1rem; font-size:22px; font-weight:600;}
.member_info p {font-size:16px;}

.member:has(.login) {display:flex; flex-direction:row; gap:2rem;}
.member:has(.login) .login {flex:1;}
.member:has(.login) .login h2.title {font-size:1.25rem; font-weight:600;}
.member:has(.login) .login .desc {background:#f9f9f9; margin:20px 0 50px; padding:20px 0; text-align:center; word-break:keep-all;}
.member:has(.login) .login .desc .icon {display:flex; flex-direction:row; justify-content:center; align-items:center; width:100px; height:100px; margin:0 auto 20px; background:#fff; border-radius:100%;}
.member:has(.login) .login.phone .desc::before {background-image:url("/namdofood/img/contents/certification02.gif");}
.member:has(.login) .login .desc span {display:block;}
.member:has(.login) .login .form {text-align:center;}
.member:has(.login) .login .form .btn {padding:10px 20px; margin:0 auto; border:1px solid #333; transition:0.3s;}

@media screen and (min-width:1025px) {
    .member .login .form .btn:hover {background:#333; color:#fff;}
}
@media screen and (max-width:768px) {
	.member_info {background-size:80px; background-position:center 20px; padding:120px 20px 20px; text-align:center;}
	.member_info strong {display:block; margin-bottom:1rem; font-size:22px; font-weight:600;}
	.member_info p {font-size:16px;}
    .member:has(.login) {flex-direction:column;}
}

/* 개인정보취급방침 동의 버튼 */
.form_check {position: relative; }
.form_check input[type=checkbox] {width: 0;height: 0; }
.form_check input[type=checkbox] + label {position: relative;padding-left:25px;cursor: pointer; font-weight:500;}
.form_check input[type=checkbox] + label::before {content: "";display: flex;flex-direction: row;justify-content: center;align-items: center;position: absolute;left: 0;top:1px;width:20px;height:20px;
border: 2px solid #CFD1D3;font-family: "xeicon";color: #CFD1D3;box-sizing: border-box;transition: 0.3s;border-radius: 2px;  box-sizing:border-box;}
.form_check input[type=checkbox]:checked + label::before {content: "";border-color: #4b5578;background: #4b5578; color:#fff;}
.form_check + .form_item {margin-left: 2rem; }

.privacy_agree_check { text-align:center;}