@charset "utf-8";

/*Button Box*/
span.custom-btn {display:inline-block; position:relative; margin-top:30px; transition:all .3s}
span.custom-btn:before, span.custom-btn:after {content:''; border:1px solid rgba(255,255,255,0.3); width:7px; height:7px; position:absolute; transition:all .3s}
span.custom-btn:before {left:-4px; top:-4px}
span.custom-btn:after {right:-4px; top:-4px}
span.custom-btn a{color:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.3); 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 rgba(255,255,255,0.3); 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 {color:rgba(255,255,255,1); border:1px solid rgba(255,255,255,1)}
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 rgba(255,255,255,1)}

/*비쥬얼*/
.visual {position:relative}
.visual ul#slider1 li {background-position:center top; width:100%; height:800px; overflow:hidden; position:relative}
.visual ul#slider1 li .txt {text-align:center; margin:240px 0 0 0; text-align:center;}
.visual ul#slider1 li .txt strong {display:none}
.visual ul#slider1 li .txt span {font-family:'NotoKrM'; color:#fff; font-size:3.3rem; word-break:keep-all; display:block; letter-spacing:-1px; text-shadow:1px -1px 5px #000; animation-duration:1s; animation-fill-mode: both; animation-name: slideInUp;  max-width:700px; margin:0 auto;}

/* 비주얼 컨트롤 버튼 */
.visual .bx-controls {width:80px; height:40px; position:absolute; top:51%; right:50px; z-index:2}
.visual .bx-controls .bx-controls-auto {width:100px; margin:0 auto}
.visual .bx-controls a {position:absolute; border:1px solid #fff; background-image:url(/namdofood/img/common/icon-all.png); background-repeat:no-repeat; display:block; width:40px; height:40px; text-indent:-9999px;}
.visual .bx-controls a:hover {border-color:#ffc700}
.visual .bx-controls a.bx-prev {background-position:-91px -2px; left:0}
.visual .bx-controls a.bx-prev:hover {background-position:-91px -33px}
.visual .bx-controls a.bx-next {background-position:-130px -2px; right:1px}
.visual .bx-controls a.bx-next:hover {background-position:-130px -33px}
/* 비주얼 페이징 버튼 */
#slider1-pager {position:absolute; top:50%; right:150px; width:70px; height:50px; z-index:2}
#slider1-pager ul li {display:block}
#slider1-pager ul li a {display:block; width:70px; height:19px; position:relative}
#slider1-pager ul li a:after {content:''; background:#fff; width:17px; height:1px; position:absolute; right:0; top:8px; transition:all .3s}
#slider1-pager ul li a.active:before {color:#ffc700; position:absolute; right:50px; top:-3px; z-index:1}
#slider1-pager ul li a.active:after {background:#ffc700; width:45px; height:1px; position:absolute; right:0; top:8px; z-index:1}
#slider1-pager ul li:nth-child(1) a.active:before {content:'01'}
#slider1-pager ul li:nth-child(2) a.active:before {content:'02'}
#slider1-pager ul li:nth-child(3) a.active:before {content:'03'}
#slider1-pager ul li:nth-child(4) a.active:before {content:'04'}

/* 비주얼 퀵 */
.visual-quick {position:absolute; top:55%; left:50%; width:535px; margin-left:-267px; z-index:1}
.visual-quick ul {clear:both; width:100%; overflow:hidden}
.visual-quick ul li {display:block; float:left; width:150px; height:150px}
.visual-quick ul li:nth-child(2) {margin:0 7.9%}
.visual-quick ul li a {display:table; width:100%; height:100%; position:relative}
.visual-quick ul li a:before {background:rgba(254,212,42,1); border-radius:100px; position:absolute; left:50%; top:50%; z-index:-1; transition:all .2s; width:0; height:0; content:""}
.visual-quick ul li a:hover:before {left:0; top:0; width:100%; height:100%}
.visual-quick ul li a:after{content:''; background:rgba(0,0,0,0.1); border:1px solid #fff; border-radius:100px; width:98%; height:98%; position:absolute; left:0; top:0; transition:all .3s; z-index:1}
.visual-quick ul li a span{color:#fff; font-size:1.3em; display:table-cell; text-align:center; vertical-align:middle; position:relative; z-index:2}
.visual-quick ul li a span i {background:url('/namdofood/img/common/icon-all.png') no-repeat 0 0; display:block; background-position:0 0; width:50px; height:17px; margin:0 auto 10px}
#contents-area01 {background-image:url(/namdofood/img/main/main-bg.jpg); background-repeat:repeat; background-position:center 100px; padding-bottom:50px}
.con-section {max-width:1200px;; margin:0 auto; position:relative}

/*팝업존 컨트롤*/
#popupzone {position:relative; margin-top:-100px}
#popupzone .page{color:#fff; font-size:0.95em; position:absolute; left:45%; bottom:15px}
/*페이지 넘버*/
#popupzone .page #popup-index {color:#ffc700}
/*좌우 페이지 버튼*/
#popupzone .controller {position:absolute; left:42.3%; bottom:35px; width:80px}
#popupzone .controller li {display:inline-block; vertical-align:middle; position:absolute; top:0}
#popupzone .controller li:nth-child(2) {right:0}
#popupzone .controller a{display:block; font:0px/0 Arial; text-indent:-10000px; position:relative; width:20px; height:20px}
#popupzone .controller a:after {content:''; background-image:url('/namdofood/img/common/icon-all.png'); background-repeat:no-repeat; display:block; width:100%; height:100%}
#popupzone .controller .popup-prev-button a:after{background-position:-100px -11px; left:0}
#popupzone .controller .popup-prev-button a:hover:after{background-position:-100px -42px}
#popupzone .controller .popup-next-button a:after{background-position:-139px -11px; right:1px}
#popupzone .controller .popup-next-button a:hover:after{background-position:-139px -42px}
#popupzone .bx-controls {position:absolute; left:52%; bottom:15px}
/*재생/정지 버튼*/
div.bx-wrapper div.bx-controls-auto a{background-image:url('/namdofood/img/common/icon-all.png'); background-repeat:no-repeat; display:inline-block; width:20px; height:20px; text-indent:-9999px;}
div.bx-wrapper div.bx-controls-auto a.bx-start{background-position:-100px -75px}
div.bx-wrapper div.bx-controls-auto a.bx-start:hover, div.bx-wrapper div.bx-controls-auto a.bx-start.active{background-position:-100px -108px}
div.bx-wrapper div.bx-controls-auto a.bx-stop{background-repeat:no-repeat; background-position:-133px -75px}
div.bx-wrapper div.bx-controls-auto a.bx-stop:hover, div.bx-wrapper div.bx-controls-auto a.bx-stop.active{background-position:-133px -108px}

/*게시판 리스트*/
.custom-box .section {color:#644434; display:table; width:100%}
#Board-section {display:table-cell; width:62.6%; padding-right:5%; position:relative; vertical-align:top}
div.Board-article h3 {position:absolute; top:0}
div.Board-article:nth-child(2) h3 {left:170px}
div.Board-article:nth-child(2) h3:before {content:''; background:#917c71; width:1px; height:18px; position:absolute; left:-18px; top:50%; margin-top:-9px}
div.Board-article h3 > a {color:#917c71; font-weight:normal; font-size:1.5rem}
div.Board-article h3 > a.selectd {color:#644434}
div.Board-article .article {height:110px; margin-top:50px}
div.Board-article .article li{clear:both; position:relative; padding-left:10px; overflow:hidden; line-height:30px; text-align:left}
div.Board-article .article li:last-child {border-bottom:0}
div.Board-article .article li:before {content:''; background:#644434; border-radius:50px; font-size:0.9em; display:block; height:2px; width:2px; position:absolute; left:0; top:15px}
div.Board-article .article li a{color:#644434; display:block; float:left; width:80%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align:left}
div.Board-article .article li a:hover {color:#644434}
div.Board-article .article li .icon-new {background-color:#7a4817; border-radius:5px; display:inline-block; width:15px; height:15px; position:relative; vertical-align:-2px}
div.Board-article .article li .icon-new:before {content:'N'; font-family:Dotum; font-size:7px; color:#fff; position:absolute; left:4px; top:0; line-height:15px}
div.Board-article .article li .icon-new img {left:-9999px !important; position: absolute !important; top: -9999px !important; visibility:hidden}
div.Board-article .article li span.date {font-size:0.9em; color:#644434; display:block; float:right; text-align:right; width:19%}
div.Board-article .more {right:55px; top:8px; position:absolute}
div.Board-article .more a {color:#644434; font-size:0.95em; display:block; padding-right:10px}
div.Board-article .more a:before {content:''; background:#644434; width:1px; height:12px; position:absolute; right:0; top:50%; margin-top:-6px}
div.Board-article .more a:after {content:''; background:#644434; width:12px; height:1px; position:absolute; right:0; top:50%; margin-right:-6px}
div.Board-article .no-data {color:#644434}

/*이용시간문의*/
#inquiry {display:table-cell; width:37.5%; text-align:center; vertical-align:top}
#inquiry h3 {color:#644434; display:block; font-weight:normal; font-size:1.5rem}
#inquiry strong {border:1px solid #c8b9b0; color:#644434; display:block; font-weight:normal; font-size:1.5em; padding:5px; margin:20px 0 20px}
#inquiry p {line-height:1.5em}

/*메인배너*/
.main-banner ul {clear:both; width:100%; overflow:hidden}
.main-banner ul li {display:block; float:left; width:25%; height:265px}
.main-banner ul li a {display:block; position:relative; height:100%; padding:35px; transition:all .3s}
.main-banner ul li a strong {font-size:1.6rem; font-weight:500}
.main-banner ul li a span {display:block;  margin:15px 0 0}
.main-banner ul li a span.more {margin:30px 0 0 ; font-size:0.9rem}
/*텍스트 색상*/
.main-banner ul li.mn01 a {color:#825346}
.main-banner ul li.mn02 a {color:#516a51}
.main-banner ul li.mn03 a {color:#ab5f73}
.main-banner ul li.mn04 a {color:#536188}
/*배경색*/
.main-banner ul li.mn01 {background:url('/namdofood/img/main/banner-bg01.gif') repeat}
.main-banner ul li.mn02 {background:url('/namdofood/img/main/banner-bg02.gif') repeat}
.main-banner ul li.mn03 {background:url('/namdofood/img/main/banner-bg03.gif') repeat}
.main-banner ul li.mn04 {background:url('/namdofood/img/main/banner-bg04.gif') repeat}
/*이미지*/
.main-banner ul li a:after{content:''; background-repeat:no-repeat; background-position:right bottom; width:100%; height:100%; position:absolute; left:0; bottom:0}
.main-banner ul li.mn01 a:after{background-image:url('/namdofood/img/main/banner-img01.png')}
.main-banner ul li.mn02 a:after{background-image:url('/namdofood/img/main/banner-img02.png')}
.main-banner ul li.mn03 a:after{background-image:url('/namdofood/img/main/banner-img03.png')}
.main-banner ul li.mn04 a:after{background-image:url('/namdofood/img/main/banner-img04.png')}
/*효과*/
.main-banner ul li a:hover {color:#333}
.main-banner ul li a:hover span.more {text-decoration:underline}

#contents-area02 {display:table; width:100%}
#contents-area02 .con-section {display:table-cell; height:245px; width:50%; text-align:center; vertical-align:middle}
#contents-area02 .con-section strong {color:#fff; font-family:'NotoKrM'; font-size:1.5rem; font-weight:normal; display:block}
/*기획전시실*/
.con-section.group01{background-image:url('/namdofood/img/main/main-banner01.jpg'); background-repeat:no-repeat; background-position:center; background-size:100% 100%;  transition:all .3s}
.con-section.group02{background-image:url('/namdofood/img/main/main-banner02.jpg'); background-repeat:no-repeat; background-position:center; background-size:100% 100%;  transition:all .3s}
.con-section.group01:hover, .con-section.group02:hover {background-size:110% 110%}

/*박물관 갤러리*/
#contents-area03{background-image:url('/namdofood/img/main/bottom-bg.gif'); background-repeat:repeat}
.photo-section {max-width:1200px;; margin:0 auto; padding:60px 0; text-align:center}
.photo-section h3 {color:#fff; font-size:2.3rem; font-weight:300; margin-bottom:35px}
.photo-section h3 span {color:#999; font-size:0.5em; display:block}
.photo-section ul.article {clear:both; overflow:hidden; width:100%}
.photo-section ul.article li {float:left; width:18.519%; height:200px; margin:0 1.852% 1.852% 0; overflow:hidden}
.photo-section ul.article li a {display:block; width:100%; height:100%; position:relative}
.photo-section ul.article li a span.thumb {display:block; position:relative; width:100%; height:100%}
.photo-section ul.article li a span.txt {display:table; opacity:0; position:absolute; left:0; bottom:-100%; width:100%; height:100%; transition:all .3s; z-index:2}
.photo-section ul.article li a span.txt strong {color:#fff; font-size:1em; font-weight:normal; padding:30px; vertical-align:middle; display:table-cell}
.photo-section ul.article li a span.txt strong i {display:block; background-position:0 0; width:50px; height:17px; margin:0 auto 10px}
.photo-section ul.article li a img {display:block; max-width:none; height:100%; margin:0 auto}
.photo-section ul.article li:nth-child(5n+5){margin-right:0}
/*박물관 갤러리 효과*/
.photo-section ul.article li a:before{content:''; background-color:rgba(0,0,0,0.5); width:100%; height:0; position:absolute; left:0; bottom:0; transition:all .3s; z-index:1}
.photo-section ul.article li a:hover:before{height:100%}
.photo-section ul.article li a:hover span.txt {opacity:1; bottom:0}
/*박물관 갤러리 컨트롤*/
.photo-section .bx-pager {display:none} /* 페이징 */
.photo-section .bx-controls-direction {position:absolute; right:0; top:-80px}
.photo-section .bx-controls-direction a {background:none; border:1px solid #ccc; height:45px; width:45px}
.photo-section .bx-wrapper .bx-prev {left:-89px}
.photo-section .bx-controls .bx-controls-direction a:hover {background:#e6edf7}
.photo-section .bx-controls .bx-controls-direction a:after {content:''; border-top:1px solid rgba(0,0,0,0.5); border-left:1px solid rgba(0,0,0,0.5); transform:rotate(-45deg); width:10px; height:10px; position:absolute; left:18px; top:16px}
.photo-section .bx-controls .bx-controls-direction a.bx-next {right:0}
.photo-section .bx-controls .bx-controls-direction a.bx-next:after {transform:rotate(135deg); left:13px; top:16px}
/*내용없음*/
.photo-section .no-data {color:#fff}

/*배너*/
div.banner-area {border-top:1px solid #d5d5d5; overflow:hidden}
div.banner-area .banner-section {width:1080px; height:80px; margin:0 auto; position:relative}
div.banner-area .banner-section h3 {font-weight:normal; display:inline-block; line-height:80px}
div.banner-area .banner-section .banner {margin-left:15%; position:absolute; top:20px}
div.banner-area .banner-section .banner .bx-wrapper .bx-viewport {box-shadow:none;}
div.banner-area ul#bannerList li {float:left; height:40px; width:180px}
/*배너 컨트롤*/
div.banner-area ul.controller {position:absolute; top:8px; left:-80px}
div.banner-area ul.controller > li {display:inline-block; width:20px; height:20px; vertical-align: middle}
div.banner-area ul.controller > li > a {background:url('/namdofood/img/main/banner_next.png') no-repeat center center; display:block; font-size:0; text-indent:-10000px; width:20px; height:20px; display:block; text-align:center}
div.banner-area ul.controller > li.bnt-play a {background:url('/namdofood/img/main/banner_next.png') no-repeat center center; display:block; font-size:0; text-indent:-10000px; width:20px; height:20px; display:block; text-align:center}
div.banner-area ul.controller > li a.bx-prev {background-image:url('/namdofood/img/main/banner_prev.png');}
div.banner-area ul.controller > li a.bx-next {font-size:0}
div.banner-area ul.controller > li a.bx-stop {background-image:url('/namdofood/img/main/banner_stop.png');}
div.banner-area ul.controller > li a.bx-start {background-image:url('/namdofood/img/main/banner_play.png');}