/**
* OLYM Cascading Style Sheets
* File Name : contents.css
* Description : 컨텐츠 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2018.03.23
* Update : 2018.03.23
* Copyright(c) 2018 OLYM Communications. All Rights Reserved.
*/
 /* ///////////////////////////포인트컬러 변경///////////////////////////
                   #00987e - 현 사이트의 포인트 컬러입니다.
				   검색해서 모두 바꾸기 해주세요!
 /////////////////////////////////////////////////////////////////// */

/************ 온라인상담 ************/
.font_star { font-weight:600; color:#ff6600; font-family:'verdana';} /* 필수항목 체크 */
.counsel .counsel_info { padding:20px;  text-align:right;}
.table_counsel, .table_counsel th, .table_counsel td { border:0; font-size:inherit;}
.table_counsel { border-bottom:1px solid #ddd;}
.table_counsel th { padding:15px 30px; text-align:left; color:#333; border-top:1px solid #ddd;}
.table_counsel td { padding:15px; color:#666; border-top:1px solid #ddd;}
.table_counsel td input[type="text"] { border-radius:3px; border:1px solid #ddd; background:#f6f6f6; height:34px; line-height:34px; padding-left:3px;}
.table_counsel td input[type="file"] { height:36px;}
.table_counsel td select { border-radius:3px; border:1px solid #ddd; height:36px;}
.table_counsel td textarea { border-radius:3px; border:1px solid #ddd; background:#f6f6f6; width:98%; box-sizing:border-box; padding:3px; height:120px;}
.table_counsel td input:focus, .table_counsel td textarea:focus { border:1px solid #000;}
.table_counsel .box_policy .privacy { width:98%; box-sizing:border-box; border:1px solid #ddd; height:120px; padding:15px; overflow-y:scroll; }
.table_counsel .box_policy .privacy h2 { padding:15px 0 10px 0; font-weight:600; color:#333; }
.table_counsel .box_policy .p_privacy { text-align:center; color:#666; margin:10px 0 5px 0; }
.counsel .bottom { text-align:center; margin-top:20px; }

@media all and (max-width:767px) {
.counsel .block { display:block;}
.table_counsel, .table_counsel th, .table_counsel td { font-size:0.95em;}
.table_counsel th { padding:15px; }
.table_counsel td { padding:15px 0; }
.table_counsel td input[type="text"] { max-width:80%;}
.table_counsel td select { border:1px solid #dedede; height:29px; width:80%; margin-top:4px; background:#fff url("/admode/module/board/images/kor/bg_select.png") no-repeat 95% center; background-size:16px; box-sizing:border-box; font-size:14px;}
.table_counsel td textarea { font-size:14px; max-width:80%;}
.table_counsel .box_policy .privacy { padding:8px;}
}

/************ 스케줄관리 ************/
.top_date_sch { width:25%; margin:0 auto 20px auto; position:relative; text-align:center; font-weight:600; color:#000; font-size:30px; font-family: 'GmarketSansBold'; padding-top:5px;}
.top_date_sch a { color:#333; font-size:26px; display:inline-block; width:40px; height:40px; border-radius:100%; border:1px solid #333; text-indent:-9999px;}
.top_date_sch .btn_prev { position:absolute; top:0; left:0; }
.top_date_sch .btn_next { position:absolute; top:0; right:0; }
.top_date_sch .btn_prev a { background:url("/project/design/contents/bg_cal_ar1.png") no-repeat center; background-size:16px;}
.top_date_sch .btn_next a { background:url("/project/design/contents/bg_cal_ar2.png") no-repeat center; background-size:16px;}
#calendar_schedule { border-bottom:1px solid #2d3033;}
#calendar_schedule .p_cate { text-align:right; margin-bottom:10px;}
#calendar_schedule .p_cate i { display:inline-block; line-height:20px; width:20px; text-align:center; border-radius:100%; color:#fff; margin-right:5px; font-size:12px; font-style:normal;}
#calendar_schedule .p_cate span { padding-right:10px; font-size:14px;}
#calendar_schedule .table_cal, #calendar_list .table_cal th, #calendar_list .table_cal td { border:0; border-collapse:collapse; }
#calendar_schedule .table_cal thead th { background:#f9f9f9;}
#calendar_schedule .table_cal th { border-top:2px solid #2d3033; background:#fff; font-weight:500; color:#333; padding:16px 0; }
#calendar_schedule .table_cal .th_sun { border-top:2px solid #ba1c22; color:#ba1c22; }
#calendar_schedule .table_cal .th_satur { border-top:2px solid #3187c3; color:#3187c3; }
#calendar_schedule .table_cal td { height:110px; padding:5px; font-size:15px; line-height:1.3em; border-top:1px solid #d7d7d7; text-align:right; vertical-align:top; }
#calendar_schedule .table_cal td b { font-weight:600; }
#calendar_schedule .table_cal td:hover { background-color:#f9f9f9;}
#calendar_schedule .table_cal td a:hover { text-decoration:underline; }
#calendar_schedule .table_cal td p.day { padding:5px;}
#calendar_schedule .table_cal td.sun { color:#f96767;  }
#calendar_schedule .table_cal td.sun a { color:#f96767; }
#calendar_schedule .table_cal td.sat { color:#5388ba; }
#calendar_schedule .table_cal td.sat a { color:#5388ba; }
#calendar_schedule .table_cal td.today { color:#f60; }
#calendar_schedule .table_cal td.today a { color:#f60; }
#calendar_schedule .table_cal td.event { color:#333; font-weight:600; }
#calendar_schedule .table_cal td.event a { color:#333; }
#calendar_schedule .table_cal .note1 { position:relative; margin-right:1px; }
#calendar_schedule .table_cal .note1 a { color:#979797; font-weight:normal; }
#calendar_schedule .table_cal .note1:hover { background:#f9f9f9;}
#calendar_schedule .table_cal .note1 .calendar_box {  text-align:left; color:#666; font-weight:normal; border-bottom:1px solid #ddd; line-height:1.3em; padding:15px 5px; margin-bottom:5px;}
#calendar_schedule .table_cal .note1 .calendar_box:last-child{ border-bottom:none;}
#calendar_schedule .calendar_box span { display:inline-block; padding:2px 6px; border-radius:20px; color:#fff; margin:0 3px 3px 0; font-size:12px;}
#calendar_schedule .work1 { background:#df4241; }
#calendar_schedule .work2 { background:#9168de; }
#calendar_schedule .work3 { background:#c09a25; }
#calendar_schedule .work4 { background:#38aab1; }
#calendar_schedule .work5 { background:#848484; }
#calendar_schedule .table_cal .note1 .calendar_box a { color:#000; font-weight:normal; }
#calendar_schedule .table_cal td img { vertical-align:middle; }
@media all and (max-width:1000px) {
.top_date_sch { width:50%;}
.top_date_sch a { width:40px; height:40px;}
#calendar_schedule .table_cal .note1 .calendar_box { padding:3px;}
#calendar_schedule .table_cal td { font-size:13px;}
.calendar_box span { padding:2px 5px; font-size:8px;}
}
@media all and (max-width:500px) {
.top_date_sch { width:80%; padding-top:0;}
}

/************ 오시는 길 ************/
.map_box { height:500px; border:1px solid #00987e;}
.map_desc { background:#f8f8f8 url("/project/design/contents/img_map.png") no-repeat 100px center; margin-bottom:20px; padding:25px 25px 25px 230px; }
.map_desc li { line-height:30px;}
.map_desc .title { color:#00987e; font-weight:600; display:inline-block; width:70px;}
@media all and (max-width:767px) {
.map_box { height:300px;}
.map_desc { background:#f8f8f8 url("/project/design/contents/img_map.png") no-repeat 30px center; padding:25px 25px 25px 130px; }
.map_desc li { font-size:0.95em;}
.map_desc .title { width:50px;}
}
@media all and (max-width:414px) {
.map_desc { background-size:60px; padding:25px 25px 25px 110px; }
.map_desc li { line-height:24px;}
}

/************ 연혁 ************/
.his_ul { border-top:1px dashed #ddd;}
.his_ul > li { padding:20px; border-bottom:1px dashed #ddd;}
.his_ul > li > .left { width:16%; float:left;}

.his_ul > li .circle-box { position:relative; width:100%; overflow:hidden; background:#00987e; border:1px solid #00987e; border-radius:100%; color:#fff; font-size:23px; font-weight:600; font-family:verdana; transition: all .3s ease;}
.his_ul > li .circle-box:before { content:""; display:block; padding-top:100%; }
.his_ul > li .circle-content { position:absolute; top:0; left:0; bottom:0; right:0; }
.his_ul > li .circle-content div { display:table; width:100%; height:100%; }
.his_ul > li .circle-content span { display:table-cell; text-align:center; vertical-align:middle; }
.his_ul > li:nth-child(2n) .circle-box  { background:#fff; border:1px solid #00987e; color:#00987e; }

.his_ul_in { float:left; width:80%; min-height:80px;}
.his_ul_in li { position:relative; color:#676767; padding:4px 0 4px 90px; background:url(/project/design/com/bg_his_li.png) no-repeat left 13px;}
.his_ul_in li .date:before { content:"- "; }
.his_ul_in li .date { position:absolute; top:4px; left:25px; color:#333; font-weight:600; }
@media all and (max-width:736px) {
.his_ul > li .circle-box  {font-size:22px;}
.his_ul_in li { font-size:13px; padding:4px 0 4px 70px; background:url(/project/design/com/bg_his_li.png) no-repeat left 13px; background-size:3px;}
}
@media all and (max-width:414px) {
.his_ul { width:100%;}
.his_ul > li .circle-box  { font-size:16px;}
}

/************ 연혁2 ************/

.his_top .title { text-align:center; color: #000; font-size: 35px; }
.his_top .box_in .left>span {vertical-align: middle;}
.his_top .em1 { color:#6a93cb;}
.his_top .em2 { color:#fe7647;}

.his_top .box_in { padding:40px 0; position:relative; background: url("/project/design/template/bg_box1.gif"),  url("/project/design/template/bg_box1.gif");  background-repeat: repeat-x, repeat-x;  background-position: center top, center bottom; display:table; width:100%; margin:50px 0;}
.his_top .box_in > div {display:table-cell; width:50%; text-align:center; box-sizing:border-box; font-size: 24px;  color:#000;}
.his_top .box_in > div i { margin-right:40px;}
/* .his_top .box_in .left { border-right:1px solid #d7d7d7;} */


.timeline { background: url(/project/design/contents/bg_his_line.gif) no-repeat center 20px; background-size: 1px 100%; }
.timeline > div { width: 50%; box-sizing:border-box; }
.timeline h3 { font-size: 40px;  color: #000; padding: 0; }

.his_list ul { margin-top:30px;}
.his_list ul > li { background: url(/project/design/template/bg_li2.png) no-repeat left 13px; color: #6f6f6f; padding-bottom:10px; position: relative; }
.his_list ul > li span { width: 100px; position: absolute; top: 0; left:15px;  font-weight:600; color:#000; font-size:0.95em;}
.his_list ul > li p { padding-left: 100px; }

.his_list2 ul { border-radius:20px; border:1px dashed #ddd; background:#f9f9f9; padding:20px 40px; }
.his_list2 ul > li { background: url(/project/design/template/bg_li2.png) no-repeat left 13px; color: #6f6f6f; padding:0 0 5px 15px; font-size:0.95em;}

.timeline .tl_right { float: right; text-align: left; }
.timeline .tl_right .bg_line { background: url(/project/design/contents/bg_his_line.gif) no-repeat left center; background-size: 10% 1px; }
.timeline .tl_right h3 { background: url(/project/design/contents/img_his_cir2.png) no-repeat left center; padding-left: 14%; margin-left:-15px;}
.timeline .tl_right .his_list ul { margin-left:calc(14% - 15px);}
.timeline .tl_right .his_list2 { margin:20px 5% 20px calc(14% - 15px);}

.timeline .tl_left { text-align: right; padding-top:200px;}
.timeline .tl_left .bg_line { background: url(/project/design/contents/bg_line.gif) no-repeat right center; background-size: 10% 1px; }
.timeline .tl_left h3 { text-align: right; background: url(/project/design/contents/img_his_cir1.png) no-repeat right center; padding-right: 14%; margin-right:-15px;}
.timeline .tl_left .his_list ul { text-align: left; float: right; margin-right:calc(14% - 15px);}
.timeline .tl_left .his_list2 { text-align: left; margin:20px calc(14% - 15px) 20px 5%;}

@media all and (max-width:1280px) {
.his_top .box_in > div {font-size: 20px;}
.his_top .box_in > div i { margin-right:20px;}
.his_top .box_in > div i img { height:70px;}
.timeline h3 { font-size: 34px; }
}

@media all and (max-width:1000px) {
.his_top .title { font-size: 22px;}
.his_top .box_in { padding:20px 0; margin:30px 0;}
.his_top .box_in > div {font-size: 16px;}
.his_top .box_in > div i img { height:60px;}
}

@media all and (max-width:500px) {
.his_top .box_in { display:block;}
.his_top .box_in > div {display:block;; width:100%;}
.his_top .box_in > div {font-size: 15px;}
.his_top .box_in > div i img { height:30px;}
.his_top .box_in .left { border-right:none;}
.timeline h3 { font-size: 20px; }
.timeline > div { width:100%;}

.his_list ul > li { background: url(/project/design/template/bg_li2.png) no-repeat left 7px; }
.his_list ul > li span { width: 80px; left:10px;}
.his_list ul > li p { padding-left: 80px; }
.his_list2 ul { padding:20px; }

.timeline .tl_right { float: none;}
.timeline .tl_right .bg_line { background:none; }
.timeline .tl_right h3 { background:#fff url(/project/design/contents/img_his_cir2.png) no-repeat center top; background-size:16px; padding:25px 0 15px 0; margin-left:0; text-align:center;}
.timeline .tl_right .his_list { background:#fff;}
.timeline .tl_right .his_list ul { margin:0 30px;}
.timeline .tl_right .his_list2 { margin:20px;}

.timeline .tl_left { float: none; text-align: left; padding-top:30px;}
.timeline .tl_left .bg_line { background: none; }
.timeline .tl_left h3 { text-align: center; background:#fff url(/project/design/contents/img_his_cir1.png) no-repeat center top; background-size:16px; padding:25px 0 015px 0; margin-right:0;}
.timeline .tl_left .his_list { background:#fff;}
.timeline .tl_left .his_list ul { text-align: left; float: none; margin:0 30px;}
.timeline .tl_left .his_list2 { margin:20px;}

}


/* Style the tab */
.tab {
  overflow: hidden;
  margin-right:60px;
  width:15%;
}

/* Style the buttons inside the tab */
.tab button {
  min-width:200px;
  border: 1px solid #ccc;
  border-radius:25px;
  display:block !important;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 18px;
  text-align:center;
  padding:10px 20px;
  background:#fff;
  margin-bottom:10px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #333;
  color:#fff;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #333;
  color:#fff;
  border:1px solid #333;
}
.tabcontent_box {width:85%;}
/* Style the tab content */
.tabcontent {
  /* display: none; */
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}
.tabcontent h3 {font-size:80px;color:#222;}
.tabcontent p.slog {font-size:26px;color:#222;font-weight:700;margin-bottom:60px;}
.hislist_box {flex-wrap:wrap;}
.hislist_box li {width:50%;margin-bottom:20px;}
.hislist_box li div {margin-right:50px;}
.hislist_box li div h4 {font-weight:700;color:#222;}

.tabcontent_box .his_img{width:200px;}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@media all and (max-width:1440px) {
.tab button {min-width:100%;}
}


@media all and (max-width:1280px) {
.hislist_box li {width:100%;}
.hislist_box li:last-of-type {margin-bottom:0;}
.tabcontent p.slog {margin-bottom:40px;}
.his_list2 {margin-top:30px;}
}

@media all and (max-width:1024px) {
.tabcontent h3 {font-size:60px;}
.tabcontent p.slog {font-size:24px;margin-bottom:30px;}
}

@media all and (max-width:768px) {
.tab button {min-width:100%;font-size:14px;}
.tabcontent p.slog {font-size:20px;}
.tabcontent h3 {font-size:40px;}

.hislist_box {flex-direction:column;}
.hislist_box li {width:100%;}
}

@media all and (max-width:425px) {
.tab {margin-right:0;width:100%;}
.tab button {min-width:auto;float:left;margin-right:10px;padding:7px 20px;}
.tabcontent_box {width:100%;margin-top:15px;}
.tabcontent p.slog {font-size:18px;}
.tabcontent h3 {font-size:36px;}
.hislist_box li div {margin-right:30px;}
.his.fx {flex-direction:column;}
}

/************ 프로필관리 ************/
.mem_list_box { border-top:2px solid #333;}
.mem_list_box > ul > li { padding:40px; border-bottom:1px solid #d4d4d4; }
.mem_list_box .mem_pic { float:left; width:30%; max-width:290px; height:290px; overflow-y:hidden;}
.mem_list_box .mem_pic img { width:100%;}
.mem_list_box .mem_text { float:left; width:65%; padding-left:5%; }
.mem_list_box .mem_text .name { font-size:30px; color:#333; padding-bottom:20px;}
.mem_list_box .mem_text .name .em { font-size:18px;}
.mem_list_box .box_text { width:100%; float:left;}
.mem_list_box .box_text ul { margin-left:15px;}

@media all and (max-width:1000px) {
.mem_list_box > ul > li { padding:30px;}
.mem_list_box .mem_text .name { font-size:26px; padding-bottom:10px;}
}
@media all and (max-width:767px) {
.mem_list_box .mem_text .name .em { display:block; line-height:1.3em;}
.mem_list_box .box_text { width:100%; margin-bottom:30px;}
}
@media all and (max-width:414px) {
.mem_list_box .mem_pic { float:none; width:80%; height:auto; margin:0 auto;}
.mem_list_box .mem_text { width:100%; padding-left:0; }
.mem_list_box .mem_text .name { text-align:center; padding-top:15px;}
}
/************ 제품관리 ************/
#prod_top { clear:both;position:relative;width:100%;height:30px; padding:10px 0; }
#prod_top .post_info { background:url(/admode/module/board/images/kor/bg_total.gif) no-repeat left 9px; float:left; padding:5px 0 0 5px; color:#505050; font-family:verdana; font-size:0.875em; font-weight:600; }
#prod_top .font_post { font-weight:normal; color:#858585; padding-left:10px; }
#prod_top .search_info { float:right; text-align:right;  margin-bottom:20px;}
#prod_top .select_search { padding:3px 3px 3px 10px; min-width:70px; height:26px; border:1px solid #cecece; color:#858585; }
#prod_top .input_search { height:19px; min-width:200px; line-height:19px; padding:3px 0 2px 3px; border:1px solid #cecece; color:#565656; }
#prod_top .btn_search_gray input { display:inline-block; background:#575757; width:66px; height:25px; font-size:14px; color:#fff; font-weight:600; letter-spacing:-0.05em; line-height:1.0em; position:relative; vertical-align:middle; border:0; cursor:pointer; _cursor:hand; }
.select_cs { position:absolute; top:19px; right:295px; font-weight:600; font-size:1.05em;}
.select_cs select { padding:3px 3px 3px 10px; min-width:80px; height:26px; border:1px solid #cecece; color:#858585;}

.tab_prod {float:left;width:94%;  border:1px solid; border-color:#e6e6e6 #afb2b8 #afb2b8 #e6e6e6; padding:20px 25px; background:#eff2f5;}
.tab_prod .ul_tab1 li { float:left; padding:0 6px 4px 0; }
.tab_prod .ul_tab1 li a { display:block; background:#fff;padding:10px 30px; text-align:center; line-height:30px; color:#3b3b3b; border:1px solid; border-color:#e6e6e6 #afb2b8 #afb2b8 #e6e6e6; font-weight:600; font-size:1.02em; }
.tab_prod .ul_tab1 li a:hover { color:#0f60a2; border:solid 1px #0f60a2;}
.tab_prod .ul_tab1 li a.on { color:#fff; border:1px solid #0f60a2;background:#0f60a2; }
.tab_prod .tab_sub { background:#f9f9f9; padding:10px 30px; }
.tab_prod .ul_tab2 li { float:left; padding-right:7px; }
.tab_prod .ul_tab2 li a { color:#3b3b3b; display:inline-block; padding-right:20px; margin-right:25px; }
.tab_prod .ul_tab2 li a:hover { color:#0f60a2; }
.tab_prod .ul_tab2 li a.on { color:#0f60a2; background:url(/project/design/com/icon_arrow_down.png) no-repeat right 2px;  }

.prod_list { border-top:2px solid #000; border-bottom:1px solid #d4d4d4;}
.prod_list ul { width:100%; margin:0 auto; text-align:center; padding-top:30px;}
.prod_list li { float:left; width:33.33%; padding-bottom:30px;}
.prod_list .img_prod { border:1px solid #d4d4d4; width:250px; height:250px; margin:0 auto; overflow:hidden; position:relative;}
.prod_list .img_prod img { transition: transform .3s; position:absolute; width:100%; height:auto; margin:auto; top:0; bottom:0; left:0; right:0}
.prod_list .img_prod:hover img {transform:scale(1.1);}
.prod_list h4 { padding:15px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.prod_list h4 a { color:#333; font-size:1.125em;}
@media all and (max-width:1000px) {
.prod_list li { width:50%;}
}@media all and (max-width:440px) {
.prod_list li { width:100%;}
}

.prod_view .left { width:370px; float:left; position:relative; margin-right:50px;}
.prod_view .left .img_prod { border:1px solid; border-color:#e6e6e6 #afb2b8 #afb2b8 #e6e6e6; width:368px;}
.prod_view .left .btn_zoom { position:absolute; bottom:0; right:0; background:#000; opacity: 0.6; filter: alpha(opacity = 60);}
.prod_view .right { width:450px; float:left;}
.prod_view h4 {color:#333; font-size:1.25em; font-weight:600; border-bottom:1px solid #333; padding:10px;background:none;}
.prod_view h5 {background:url("/project/design/com/icon_sq.png") no-repeat 10px center;  color:#333; font-size:1.125em; font-weight:600; border:1px solid; border-color:#e6e6e6 #afb2b8 #afb2b8 #e6e6e6; padding:10px 0 10px 30px;}
.prod_view .right .img_list { padding:25px 0; border-bottom:1px solid #efefef;}
.prod_view .right .img_list ul { margin-left:20px;}
.prod_view .right .img_list li { float:left; border:1px solid; border-color:#e6e6e6 #afb2b8 #afb2b8 #e6e6e6; width:100px; margin-right:15px;}
.prod_view .right .btn_prod { text-align:center;}
.prod_view .prod_spec { clear:both; padding-top:40px;}
.prod_view .prod_spec .in_box { padding:30px; color:#5f5f5f; font-size:1.125em;}

.prod_view dl {float:left; width:100%; padding-left:10px;margin-top:10px;}
.prod_view dt {width:25%; float:left;padding-bottom:10px; font-weight:600; }
.prod_view dd {width:75%; float:left;padding-bottom:10px;}

/************ 지점안내 ************/
.area_box { width:57%; margin-right:3%; height:350px; float:left;}
.area_box .p_info { color:#666; font-size:18px; padding:20px; text-align:center;}
.area_box > ul > li { float:left; width:32%; padding:0 2% 10px 0;}
.area_box > ul > li:nth-child(3n) { padding:0 0 10px 0;}
.area_box li a { border:1px solid #ddd; line-height:34px; text-align:center; color:#666; font-weight:600; display:block;}
.area_box li a:hover, .area_box li .on { border:1px solid #333; background:#2b75b0; color:#fff; font-weight:600;}

.right_map { width:40%; height:350px; float:left; background:#efefef;}
.select_map { margin:20px auto; width:250px; position:relative;}
.map01 { position:absolute; top:43px; left:82px; z-index:10;} /* 서울 */
.map02 { position:absolute; top:199px; left:171px; z-index:10;} /* 부산 */
.map03 { position:absolute; top:159px; left:164px; z-index:10;} /* 대구 */
.map04 { position:absolute; top:49px; left:45px; z-index:5;} /* 인천 */
.map05 { position:absolute; top:206px; left:75px; z-index:10;} /* 광주 */
.map06 { position:absolute; top:134px; left:86px; z-index:10;} /* 대전 */
.map07 { position:absolute; top:178px; left:197px; z-index:10;} /* 울산 */
.map08 { position:absolute; top:2px; left:89px;} /* 강원도 */
.map09 { position:absolute; top:25px; left:57px;} /* 경기도 */
.map10 { position:absolute; top:165px; left:119px;} /* 경남 */
.map11 { position:absolute; top:91px; left:132px;} /* 경북 */
.map12 { position:absolute; top:194px; left:32px;} /* 전남 */
.map13 { position:absolute; top:154px; left:58px;} /* 전북 */
.map14 { position:absolute; top:280px; left:29px;} /* 제주도 */
.map15 { position:absolute; top:91px; left:40px;} /* 충남 */
.map16 { position:absolute; top:86px; left:105px;} /* 충북 */
.map17 { position:absolute; top:117px; left:79px; z-index:5;} /* 세종 */

.agen_info { color:#666; text-align:left; padding:15px 0 0 15px;}
.agen_info span { color:#333; font-weight:600;}
.map_layer { width:600px;height:450px;}
/* 레이어팝업 css /admode/common/script/lib/colorbox/colorbox.css */

@media all and (max-width:767px) {
.area_box { width:100%; margin-right:0; height:auto;}
.right_map { width:100%;}
.map_layer { width:320px;height:450px;}
}


/************ 관련이미지 ************/
.preview_box { padding:40px 0;}
/* list */
.preview_box #carousel, .preview_box #carousel2 { margin:0 0 40px 0 !important; padding:0 60px;}
.preview_box .list_slide > li { width:163px !important; height:110px !important; margin-right:20px !important; position:relative; }
.preview_box .list_slide > li img {position:absolute; width:auto !important; height:auto !important; max-width:100%; max-height:100%; margin:auto; top:0; bottom:0; left:0; right:0; cursor:pointer;}
/* view */
.preview_box #slider, .preview_box #slider2 { margin:0 !important; background:#f7f7f7; }
.preview_box .view_slide > li { width:100%;  position:relative; text-align:center !important;}
.preview_box .view_slide > li > div { position:relative; height:500px !important; margin:30px 70px;}
.preview_box .view_slide > li img { position:absolute; width:auto !important; height:auto !important; max-width:100%; max-height:100%; margin:auto; top:0; bottom:0; left:0; right:0; cursor:pointer;}
.preview_box .view_slide .pic_title {padding-bottom:30px; text-align:center; color:#666; font-size:17px;}

.preview_box .flex-direction-nav {  position:absolute;width:100%; left:50%; margin-left:-50%; top:50% !important;}
.preview_box .flex-prev { background:#fff url("/project/design/contents/icon_prev.png") no-repeat center !important; background-size:15px !important; width:46px; height:46px; border:1px solid #ddd; display:block;font-size:0; left:20px !important;}
.preview_box .flex-next { background:#fff url("/project/design/contents/icon_next.png") no-repeat center !important; background-size:15px !important; width:46px; height:46px; border:1px solid #ddd; display:block;font-size:0; right:20px !important;}

.preview_box #carousel .flex-prev, .preview_box #carousel .flex-prev { left:0 !important;}
.preview_box #carousel .flex-next, .preview_box #carousel .flex-next { right:0 !important;}

@media all and (max-width:1000px) {
.preview_box .view_slide > li > div { height:400px !important;}
.preview_box .flex-prev { background-size:12px !important; width:36px; height:36px;}
.preview_box .flex-next { background-size:12px !important; width:36px; height:36px;}
}
@media all and (max-width:736px) {
.preview_box { padding:30px 0;}
.preview_box #carousel, .preview_box #carousel2 { margin:0 0 30px 0 !important; padding:0 40px;}
.preview_box .list_slide > li { width:100px !important; height:67px !important; margin-right:10px !important; }
.preview_box .view_slide > li > div { height:300px !important; margin:20px 30px;}
.preview_box .flex-prev { left:0 !important;}
.preview_box .flex-next { right:0 !important;}
}
@media all and (max-width:414px) {
.preview_box .view_slide > li > div { height:200px !important;}
.preview_box .view_slide .pic_title {padding-bottom:20px; font-size:15px;}
}


/************ 포트폴리오 ************/
.work .work_box { float:left; width:24.25%; margin-right:1%; }
.work .work_box:nth-child(4n) { margin-right:0;}
.work .work_box a { display:block; position:relative; margin-bottom:30px; width:100%; height:320px; padding-bottom:10px; transition: all 0.7s ease;}
.work .work_box a:hover { background:#f5f5f5;transform: translate(0,10px);}
.work .work_box a .img { position:relative;}
.work .work_box a .img img { width:100%; transition: all .3s ease;}
.work .work_box a .img > .img_ov { opacity:0; transition: opacity 1s; position:absolute; left:0; top:0;}
.work .work_box a:hover .img > .img_ov { opacity:1; }
.work .work_box a:hover .img img { transition: all .3s ease; }
.work .work_box a h2 { margin:30px 0 10px 10px; }
.work .work_box a h2 .cate { color:#00987e; font-size:12px; font-weight:600; }
.work .work_box a h2 .title { color:#383838; font-weight:600; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.work .work_box a .desc { color:#8d8d8d; margin:0 10px; }
.work .work_box a .mark { position:absolute; top:20px; left:18px;}
/* 태블릿 가로 */
@media all and (max-width:1260px) {
.work .work_box a { width:100%;}
.work .work_box a .img img { width:100%;}
}
/* 태블릿 세로 */
@media all and (max-width:1000px) {
}
/* 모바일 가로 */
@media all and (max-width:736px) {
.work { margin-top:0;}
.work .work_box {width:48%;margin-right:4%;}
.work .work_box:nth-child(4n) { margin-right:4%;}
.work .work_box:nth-child(2n) {margin-right:0;}
}
/* 모바일 세로 */
@media all and (max-width:414px) {
.work .work_box {width:100%;margin-right:0;}
.work .work_box a {height:auto;}
}

/************ 포트폴리오_view ************/
.work_view > .title { padding:30px 40px; position:relative; background:#f8f8f8; border-top:2px solid #000; border-bottom:1px solid #ddd}
.work_view > .title p { font-size:14px;}
.work_view > .title .date { color:#8d8d8d;}
.work_view > .title .a_link { color:#4b4b4b;}
.work_view > .title .a_link:hover { border-bottom:1px dashed #333;}
.work_view > .title h4 { color:#383838; font-size:30px;}
.work_view > .title h4 .title_hide { font-size:0;}
.work_view > .title .btn_right { position:absolute; top:50px; right:40px;}
.work_view > .title .btn_right .btn_next { display:inline-block; background:url(/project/design/com/bg_next_s.png) no-repeat right center; background-size:auto 100%; padding-right:40px; height:32px;}
.work_view > .title .btn_right .btn_next span { border-bottom:1px solid #b2b2b2; color:#7b7b7b; font-size:15px; line-height:32px;}
.work_view > .title .btn_right .btn_next span:hover { color:#333; border-bottom:1px solid #333;}
.work_view > .title .btn_right .btn_list { vertical-align:top; display:inline-block; background:url(/project/design/com/bg_list_s.png) no-repeat center; background-size:auto 100%; height:32px; width:32px; text-indent:-9999px; margin-left:5px;}

.work_view .con { text-align:center; padding-top:30px;}
.work_view .con img { max-width:100%;}

.work_view .site_link { text-align:center; font-size:17px; padding:35px 0 50px 0; border-bottom:1px solid #ddd;}
.work_view .site_link a { color:#333; border-bottom:1px dashed #333;}
.work_view .site_link a:hover { color:#00987e; border-bottom:1px dashed #00987e;}

.work_view .bottom { padding-top:30px; position:relative; text-align:center; border-top:1px solid #ddd;}
.work_view .bottom a { color:#7b7b7b;}
.work_view .bottom a:hover { text-decoration:underline;}
.work_view .bottom .btn_list { border:1px solid #cbcbcb; display:inline-block; border-radius:3px; padding:0 50px; line-height:40px; font-size:16px; color:#282828; font-weight:600;}
.work_view .bottom .btn_list:hover { text-decoration:none; color:#fff; background:#00987e !important; border:1px solid #00987e;}
.work_view .bottom .btn_prev { position:absolute; top:30px; left:20px;}
.work_view .bottom .btn_prev a { display:inline-block; line-height:40px; color:#7b7b7b; font-size:15px; padding-left:56px; background:url(/project/design/com/bg_prev_l.png) no-repeat left center;}
.work_view .bottom .btn_next { position:absolute; top:30px; right:20px;}
.work_view .bottom .btn_next a { display:inline-block; line-height:40px; color:#7b7b7b; font-size:15px; padding-right:56px; background:url(/project/design/com/bg_next_l.png) no-repeat right center;}

.work_view h5 { font-size:24px; margin-bottom:10px; text-align:center; padding:20px 0 16px 0;}
.work_view .relation { width:100%;}
.work_view .relation .work_box { float:left; width:23.5%; margin-right:2%; }
.work_view .relation .work_box a { height:auto; margin-bottom:50px;}
.work_view .relation .work_box:nth-child(4) { margin-right:0; }
/* 태블릿 가로 */
@media all and (max-width:1260px) {
.work_view .relation { width:100%;}
}
/* 태블릿 세로 */
@media all and (max-width:1000px) {
.work_view { border-top:1px solid #ddd;}
.work_view > .title { padding:10px 20px;}
.work_view > .title .btn_right { top:30px; right:20px;}
.work_view h5 { font-size:17px;}
.work_view .con { padding-top:0;}
.work_view .relation .work_box a { margin-bottom:30px;}
.work_view .relation .work_box a h2 { margin:10px 0 10px 10px; }
.work_view .relation .work_box a .desc { display:none;}
}
/* 모바일 가로 */
@media all and (max-width:736px) {
.work_view > .title { padding:10px 20px;}
.work_view > .title .btn_right { top:10px; right:0;}
.work_view > .title h4 { font-size:20px;}
.work_view > .title .btn_right .btn_next span { display:none;}
.work_view .bottom .btn_list { padding:0; width:auto; display:block; margin:0 50px; box-sizing:border-box;}
.work_view .bottom .btn_prev a, .work_view .bottom .btn_next a { text-indent:-9999px; border:1px solid #cbcbcb; border-radius:3px; width:40px;}
.work_view .bottom .btn_prev { left:0;}
.work_view .bottom .btn_prev a { padding-left:0; background:url(/project/design/com/bg_prev_l.png) no-repeat center; background-size:auto 26px;}
.work_view .bottom .btn_next { right:0;}
.work_view .bottom .btn_next a { padding-right:0; background:url(/project/design/com/bg_next_l.png) no-repeat center; background-size:auto 26px;}

.work_view .relation .work_box a h2 .title { font-size:13px; }
}
/* 모바일 세로 */
@media all and (max-width:414px) {
.work_view > .title { padding:10px 10px 20px 10px;}
.work_view > .title .btn_right { display:none;}
.work_view .site_link { font-size:15px; padding:25px 0 40px 0;}
.work_view .relation .work_box {width:48%;margin-right:4%;}
.work_view .relation .work_box:nth-child(2n) {margin-right:0;}
}

/* 추진과정 [241004] */
.history_inner { width: 100%; display: flex; flex-direction: row; gap: 30px; }
.history_inner > img { width: 450px !important; height: fit-content; border: 1px solid #eee;}
.history_inner > .right_desc { width: 60%;}

.tabcontent h3 { font-weight: 800; }
.tabcontent p.slog { margin-bottom: 30px !important; font-weight: 700; }

.hislist_box { flex-direction: column; }
.hislist_box > li { width: 100% !important;}

@media(max-width:1024px) {
  .history_inner > img { width: 40%; }
  .history_inner { flex-direction: column; }
  .history_inner > .right_desc { width: 100%;}
}
@media(max-width:800px) {
  .tab { width: 25%; margin-right: 30px; }

  .history_inner > img { width: 100%;}
  .hislist_box > li > div { margin-right: 20px !important;}
}
@media(max-width:425px) {
  .tab { width: 100%; }
}