@charset "utf-8";
/* 탭메뉴 */
.tab {margin-bottom:40px; text-align:center}
.tab li {padding:0 11px 0 4px; display:inline; height:17px; line-height:17px; background:url(/design/images/bullet/bul_tab.gif) right center no-repeat; color:#666; font-size:1.0625em}
.tab li:last-child {background:none}
.tab li.on a, .tab li a:hover, .tab li a:focus {font-family:NanumGothicBold; color:#333; text-decoration:none}

/* 테이블 */
table {margin-bottom:10px; width:100%}
table caption {display:block; width:1px; height:1px; margin-top:-1px; text-indent:-5000px}
table thead th {padding:4px 0 5px; line-height:40px; text-align:center; background:#f0f0f0; border-top:2px solid #333}
table thead th.al {padding-left:10px; text-align:left}
table thead th.ar {padding-right:10px; text-align:right}
table td {padding:10px; line-height:30px; text-align:center; border-bottom:1px solid #e2e2e2; color:#666; font-size:0.9375em}
table td.link, table tbody.detail td {text-align:left}
table td.link a {color:#666}
table td a.secret {padding-right:20px; background:url(/design/images/bullet/ico_secret.png) right center no-repeat}
table td a.file {padding-right:20px; background:url(/design/images/bullet/ico_file.png) right center no-repeat}
table td a.new {padding-right:20px; background:url(/design/images/bullet/ico_new.png) right center no-repeat}
table td.construction img {width:100%; max-width:950px}
table td.construction p.cont {padding:0 18px 28px 18px; color:#777}
table.input_table th, table.input_table td {padding:5px 10px; line-height:35px; text-align:left; border-top:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2}
table.input_table th {padding:5px 18px; background:#f0f0f0; font-family:NanumGothicBold; font-weight:normal}
table.input_table td select {height:35px; line-height:35px; font-size:0.9375em}
table.input_table td input[type="text"], table.input_table td input[type="password"], table.input_table td input[type="date"] {padding-left:5px; height:33px; line-height:33px}
table.input_table td input[type="checkbox"], table.input_table td input[type="radio"] {width:23px; height:23px}
table.input_table td a.tip {padding-right:7px}
table.input_table img {vertical-align:middle}
table.input_table td em {color:#dd1a1a; font-style:normal}
/*달력*/
.sun, .sun a {color:#d31a1a !important}
.sat, .sat a {color:#2272b3 !important}
.ui-datepicker-calendar th {background:#fff; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6}
img.ui-datepicker-trigger {padding-left: 5px}
.ui-datepicker td span, .ui-datepicker td a {border:none !important}
.ui-datepicker .ui-datepicker-buttonpane {padding:0}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {display:none}
.ui-datepicker .ui-datepicker-buttonpane button {margin:0; padding:0; width:21px; height:21px; text-indent:-5000px; background:url(/design/images/btn/btn_closed.png) 0 0 no-repeat; border:0}

/* 페이징 */
.paging {clear:both; overflow:hidden; margin:0 auto; padding-top:40px; text-align:center}
.paging a, .paging strong {display:inline-block; margin:0; width:25px; height:28px; line-height:28px; color:#666; text-align:center}
.paging a:hover, .paging a:focus {font-family:NanumGothicBold; color:#333; text-decoration:none}
.paging strong {width:28px; background:#666; color:#fff}
.paging a.prev {margin:0 6px 0 0; width:28px; background:url(/design/images/btn/btn_prev.gif) 0 0 no-repeat; text-indent:-5000px}
.paging a.next {margin:0 0 0 6px; width:28px; background:url(/design/images/btn/btn_next.gif) 0 0 no-repeat; text-indent:-5000px}
.paging a.first {width:28px; background:url(/design/images/btn/btn_first.gif) 0 0 no-repeat; text-indent:-5000px}
.paging a.end {width:28px; background:url(/design/images/btn/btn_end.gif) 0 0 no-repeat; text-indent:-5000px}
.paging span {float:none !important;}
.paging span strong {width:auto; height:auto; background:none; color:#666; font-family:NanumGothicBold; font-weight:normal}

/* 버튼 */
.btn_box {margin-bottom:10px; float:right}
.btn_box a:last-child {margin-right:0;}
a.btn {float:left; margin:0 0 0 8px; padding:10px 13px; height:18px; line-height:18px; border:1px solid #666; font-family:NanumGothicBold; text-decoration:none}
a.btn.btn_basic {background:#fff; color:#666}
a.btn.btn_list {background:#666; color:#fff}
.btn_box.top {margin-top:-68px}
td a.btn {float:none; margin:0; padding:8px 13px; vertical-align:-2px; border:1px solid #ccc}
a.btn_file {background:#ccc; color:#333}
/*.file {position:relative; overflow:hidden; display:inline-block; width:85px; height:35px; line-height:35px; vertical-align:middle; text-align:center; background:#ccc; color:#333}
.file input[type="file"] {position:absolute; top:0; left:0; width:85px; height:35px; opacity:0}
.file input[type="file"]:hover, .file input[type="file"]:focus {outline:1px solid inherit}*/

/* 상세페이지 리스트 */
.detail_list {clear:both; border-top:1px solid #e2e2e2}
.detail_list li {position:relative; padding:18px 0 17px; height:15px; line-height:15px; border-bottom:1px solid #e2e2e2}
.detail_list li a {padding-left:35px; background:url(/design/images/btn/btn_prev02.png) 0 2px no-repeat; color:#666}
.detail_list li a:hover, .detail_list li a:focus {font-family:NanumGothicBold; color:#333; text-decoration:none}
.detail_list li .date {position:absolute; top:18px; right:15px; color:#666}
.detail_list li.next a {background:url(/design/images/btn/btn_next02.png) 0 2px no-repeat}

/* 검색폼 */
.search {float:left}
.search * {float:left; margin-right:5px !important}
.search .select {width:120px}
.search .ui-state-default {border:1px solid #999 !important}
.search .ui-selectmenu-button span.ui-selectmenu-text { padding:8px 5px 9px 5px}
.search input[type="text"] {padding:0 10px; height:38px; border:1px solid #999}

/* 타이틀 */
h3.title {clear:both; margin-top:50px; margin-bottom:20px; height:50px; line-height:50px; text-align:center; background:#fff; border-top:2px solid #333; border-bottom:2px solid #333; font-size:1.125em; font-family:NanumGothicBold; font-weight:normal}
h3.title:first-child {margin-top:0}

/* 인트로 */
#contents.intro {width:100%; max-width:1020px; padding-top:84px}
#contents.intro h2 {float:left; margin:0; padding:0 0 0 3.4%; box-sizing:border-box; width:26.4%; *width:14%; line-height:1.4em; text-align:left; font-family:NanumGothic}
#contents.intro h2 span {display:block}
.intro .clear div, .intro .clear dl {float:right; width:73.6%; line-height:2.0em; color:#666}
.intro .clear div.intro_box {margin-bottom:15%}
.intro .clear div.intro_box img {max-width:100%}
.intro .clear dl {overflow:hidden; margin-bottom:5.8%}
.intro .clear dl dt, .intro .clear dl dd {float:left; width:85.3%; color:#333}
.intro .clear dl dt {clear:both; width:14.7%; font-size:1.0em}
.intro .clear .map * {width:100%}

/* 로그인 */
.login_box {text-align:center}
.login_box input {height:38px; line-height:38px}
.login_box p {margin-bottom:49px}
.login_box a {float:none; display:inline-block; margin:0; vertical-align:middle}
.login_box table {margin:0 auto; width:60%}
.login_box table td {border:0; text-align:center; color:#333}
.login_box table tr td:first-child {text-align:right}
.login_box table tr td:last-child {text-align:left}
.login_box table tr td a {padding:10px 13px}


/* 포트폴리오 리스트 */
.porfol_list {width:100%; overflow:hidden}
.porfol_list li {position:relative; float:left; margin-right:1.9%; padding-bottom:80px; width:49%; line-height:20px}
.porfol_list li.last {margin-right:0}
.porfol_list li img {width:100%}
.porfol_list li strong {position:absolute; bottom:99px; left:0; display:block; width:70px; height:30px; line-height:30px; text-align:center; background:#333; color:#fff; font-size:0.8125em; font-weight:normal}
.porfol_list li a {color:#333}
.porfol_list li a span {position:absolute; bottom:43px; display:block; width:100%; text-align:center}
.porfol_list li a span.date {width:100%; bottom:23px; color:#666}

/*팝업 */
#pop {padding:10px}
.mt10 {margin-top:10px}
#pop table.input_table td em {font-size:0.8125em}
#pop .tab {clear:both; float:left; margin-bottom:20px; border-bottom:1px solid #ddd; border-right:1px solid #ddd}
#pop .tab li {overflow:hidden; float:left; padding:0; height:auto; background:none; border-left:1px solid #ddd; border-top:1px solid #ddd}
#pop .tab li a {display:block; padding:2px 5px; width:113px; height:auto; line-height:44px; font-size:0.9375em; color:#666}
#pop .tab li.clear {clear:both}
#pop .tab li.two a {height:44px; line-height:1.5}
#pop .tab li.on a , #pop .tab li a:hover, #pop .tab li a:focus {background:#f1f1f1; font-family:NanumGothicBold; color:#333; text-decoration:none}


@media all and (max-width:640px){
#contents.intro {padding-top:0}
#contents .m_tab {overflow:hidden; box-sizing:border-box; width:100%}
#contents .m_tab li {position:relative; float:left; box-sizing:border-box; width:50%}
#contents .m_tab li a {box-sizing:border-box; display:block; width:100%; height:33px; line-height:32px; text-align:center; background:#f5f5f5; border:1px solid #f5f5f5; border-top:none; font-size:0.6em; color:#333; text-decoration:none}
#contents .m_tab li a.on {background:#333; color:#fff; font-weight:bold}
#contents .intro_box {box-sizing:border-box; padding:10px; width:100%}
#contents .intro_box img {width:100%}
#contents .intro_box dl {overflow:hidden; box-sizing:border-box; margin:0 auto; padding-bottom:10px; width:100%}
#contents .intro_box dt, #contents .intro_box dd {float:left; font-size:0.7em; line-height:1.5em}
#contents .intro_box dt {clear:both; width:15%; min-width:48px; font-weight:bold}
#contents .intro_box dd {padding-bottom:5px}

#contents .title {overflow:hidden; box-sizing:border-box; padding:0 10px; width:100%; height:32px; line-height:32px; background:#f5f5f5; border-bottom:1px solid #e1e1e1; color:#333}
#contents .title h2 {margin:0; float:left; height:32px; line-height:32px; padding-right:15px; font-size:0.8em; background:url(../images/bg_h2.png) right 0 no-repeat; background-size:contain}
#contents .title h3 {float:left; height:32px; line-height:32px; padding-left:5px; font-size:0.8em}
#contents .title select {float:right; margin-top:5px; height:22px; line-height:22px; border:1px solid #999; border-radius:4px !important; font-size:0.6em}

#contents .porfol_list li {box-sizing:border-box; padding:10px 10px 5px; width:100%; height:121px; float:none}
#contents .porfol_list li img {position:absolute; top:10px; left:10px; width:153px; height:106px}
#contents .porfol_list li a {display:block; box-sizing:border-box; padding:10px 0 0 166px; font-size:0.6em}
#contents .porfol_list li strong {display:inline-block; position:relative; top:0; left:0; padding:0 4px; width:auto; height:auto; line-height:1.5em; background:#666;}
#contents .porfol_list li span {position:relative; bottom:0; text-align:left; line-height:1.5em}
#contents .porfol_list li span.date {position:absolute; bottom:15px}

#contents .list {margin-top:4px}
#contents .list li {box-sizing:border-box; padding:6px 10px; width:100%; line-height:18px; border-bottom:1px solid #ddd; font-size:0.7em}
#contents .list li .date {color:#666}
#contents .list li .date:before, #contents .list li .date:after {padding:0 6px; content:"|"; color:#666; font-size:0.8em}
#contents .list li .blue {color:#235695}
#contents .list li .yellow {color:#a6781f}
#contents .list li .red {color:#a62626}
#contents .list li .green {color:#3e8e1f}

#contents table thead th {height:33px; line-height:18px; background:#fff; border:none; border-bottom:1px solid #e1e1e1; font-size:0.9em; color:#333}
#contents table thead th.ar {font-size:0.8em; font-weight:normal; color:#666}
#contents table tbody td.construction {font-size:0.8em; line-height:1.5em; border-bottom:none}
#contents table tbody td .cont {padding:0; font-size:0.9em; color:#666}

#contents .btn {box-sizing:border-box; display:block; margin:10px auto 15px; width:90%; height:33px; line-height:31px; text-align:center; vertical-align:middle; border:1px solid #c8c8c8; border-radius:3px; background:#f7f7f7; background-image:-webkit-gradient(linear, left top, left bottom, from( #fff ), to( #f7f7f7 )); background-image:-webkit-linear-gradient( #fff, #f7f7f7 ); background-image:-moz-linear-gradient( #fff, #f7f7f7 ); background-image:-ms-linear-gradient( #fff, #f7f7f7 ); background-image:-o-linear-gradient( #fff, #f7f7f7 ); background-image:linear-gradient( #fff, #f7f7f7 )}
#contents .btn a {font-size:0.75em}
#contents .more span {vertical-align:middle; display:inline-block; margin-left:5px; width:15px; height:15px; background:url(../images/ico_more.png) 0 0 no-repeat; background-size:100%}

#contents .btn2 {padding:40px 30px 16px; text-align:right}
#contents .btn2 a {display:inline-block; box-sizing:border-box; width:20%; height:35px; line-height:35px; text-align:center; border:0px solid #666; font-weight:bold; font-size:0.9em}
#contents .btn2 a.white {background:#fff; color:#333}
#contents .btn2 a.black {background:#666; color:#fff}
#contents .btn2 a.orange {background:orange; color:#333}
#contents .btn2 a.gray {background:gray; color:#fff}
#contents .btn2 .up span {display:inline-block; margin-right:5px; width:7px; height:4px; vertical-align:1px; background:url(/design/images/mobile/ico_up.png) 0 0 no-repeat; background-size:100%}
#contents .btn2 .down span {display:inline-block; margin-right:5px; width:7px; height:4px; vertical-align:1px; background:url(/design/images/mobile/ico_down.png) 0 0 no-repeat; background-size:100%}

#contents .btn3 a {display:inline-block; box-sizing:border-box; width:100px; height:75px; text-align:center; vertical-align:middle; font-weight:bold; font-size:0.9em; background-color:#333; color:#fff; padding-top:23px;}

}
