@import url(basic.css); /* 초기화 */

/************************************************************************************
UI st.
*************************************************************************************/
/* Input, Select, Textarea */
input[type="text"],
input[type="search"],
input[type="password"] {height: 38px; padding: 0 15px;}
input[type="file"],
input[type="submit"],
input[type="button"] {height: 40px; padding: 0 15px;}
select {height: 40px; padding: 0 0 0 10px; font-size: 14px; border-radius: 0px; /* -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('../../images/common/btn_down.png') right 5px center no-repeat; */ font-family: 'Noto Sans KR', sans-serif;}
/* select::-ms-expand {display: none;} */
textarea {width: calc(100% - 22px); padding: 10px; font-family: 'Noto Sans KR', sans-serif;}


/* File */
.filebox {margin-bottom: 5px;}
.filebox>* {display: inline-block; vertical-align: top;}
.filebox input[type='text'] {height: 40px; font-size: 14px;}
.filebox label {position: relative; width: 80px; height: 38px; text-align: center; line-height: 38px; overflow: hidden; cursor: pointer;}
.filebox label input {display: none; position: absolute; right: 0; width: 0; height: 0; overflow: hidden; border: 0;}


/* Radio, Checkbox */
.radio_style1 {position: relative; display: inline-block; margin-right: 20px; padding-left: 22px; vertical-align: top;}
.radio_style1 input[type='radio'] {display: none;}
.radio_style1 label {display: inline-block; vertical-align: top; height: 18px; line-height: 18px;}
.radio_style1 input + label.radio_img {position: absolute; top: 0; left: 0; width: 18px; cursor: pointer; background: url('../../images/common/img_radio_off.png') no-repeat;}
.radio_style1 input:checked + label.radio_img {background: url('../../images/common/img_radio_red_on.png') no-repeat;}

.check_style1 {position: relative; display: inline-block; margin-right: 20px; padding-left: 22px; vertical-align: top;}
.check_style1 input[type='checkbox'] {display: none;}
.check_style1 label {display:inline-block; vertical-align: top; }
.check_style1 input + label.check_img {position: absolute; top: 0; left: 0; width: 18px;height: 18px; cursor: pointer; background: url('../../images/common/img_check_off.png') no-repeat;}
.check_style1 input:checked + label.check_img {background: url('../../images/common/img_check_red_on.png') no-repeat;}

.flatCheck {position: relative; width: 53px; height: 30px;}
.flatCheck input[type='checkbox'] {opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
.flatCheck div {position: relative; top: -16px; width: 100%; height: 100%; background: #fff;  border: 1px solid #ddd; border-radius: 50px; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; -ms-transition: all .2s ease; transition: all .2s ease; }
.flatCheck label {display: block; position: absolute; top: 1px; left: 0; width: 26px; height: 26px; cursor: pointer; z-index: 1; border-radius: 50%; background: #fff; border: 1px solid #ddd; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; -ms-transition: all .3s ease; transition: all .2s ease;}
.flatCheck input[type=checkbox]:checked ~ div {background: #5787e9; border: 1px solid #5787e9;}
.flatCheck input[type=checkbox]:checked ~ label {left: 26px; border: 1px solid #5787e9;}


/* Scroll */
.scroll::-webkit-scrollbar {width: 5px; height: 5px;}
.scroll::-webkit-scrollbar-button:start:decrement, 
.scroll::-webkit-scrollbar-button:end:increment {display: block; height: 3px;}
.scroll::-webkit-scrollbar-track {background: none;}
.scroll::-webkit-scrollbar-thumb {width:5px; height: 5px; border-radius: 7px; background: #eee;}
.scroll::-webkit-scrollbar-thumb:hover {background: #eee;}
.scroll:hover::-webkit-scrollbar-thumb {background: #eee;}
.scroll {scrollbar-3dLight-Color: none; scrollbar-arrow-color: #d3d3d3; scrollbar-base-color: rgb(238, 238, 238); scrollbar-Face-Color: rgb(213, 213, 213); scrollbar-Track-Color: #eee; scrollbar-DarkShadow-Color: none; scrollbar-Highlight-Color: none; scrollbar-Shadow-Color: rgb(238, 238, 238);}


/* Layer popup */
.popup_wrap {display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 40;}
.popup_inner {position: relative; margin: 100px auto 0; background: #fff; border: 2px solid #282828; z-index: 2;}
.popup_inner .btn_close {position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; background: url('../../images/common/ic_popup_close.png') center center no-repeat; text-indent: -9999px; z-index: 99;}
.popup_inner .popup_header {position: relative;}
.popup_inner .popup_contents {}

.popup_bg {position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 1;}
.popup_inner .pop_info_text {font-size: 16px; line-height: 24px;}


/* Basic calendar */
input.datepicker {width: calc(100% - 52px) !important; padding-right: 35px; background: #fff url('../../images/common/ic_calendar.png') right 5px center no-repeat; cursor: pointer;}
.ui-datepicker .ui-widget.ui-widget-content {border:0; color: #23abe7; background: #333;}
.ui-datepicker .ui-widget-header {padding: 5px 0; font-size: 18px; color: #fff; font-weight: 400; background: #666; border: 0; border-radius: 0;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {top: 6px; width: 30px; height: 25px; cursor: pointer;}
.ui-datepicker .ui-state-hover.ui-datepicker-prev-hover {left: 2px; top: 6px; background: #666; border: 0;}
.ui-datepicker .ui-state-hover.ui-datepicker-next-hover {right: 2px; top: 6px; background: #666; border: 0;}
.ui-datepicker .ui-widget-header .ui-icon.ui-icon-circle-triangle-w {position: static; width: 30px; height: 30px; margin: 0; background: #666 url('../../images/common/ic_arrow_left_white.png') center center no-repeat !important;}
.ui-datepicker .ui-widget-header .ui-icon.ui-icon-circle-triangle-e {position: static; width: 30px; height: 30px; margin: 0; background: #666 url('../../images/common/ic_arrow_right_white.png') center center no-repeat !important;}
.ui-datepicker {padding: 0; width: auto; border-radius: 0 !important;}
.ui-datepicker .ui-datepicker-title select {height: 30px; margin: 0 1px; padding: 0 0 0 5px; vertical-align: middle; font-size: 14px;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-month {width: 38%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {width: 48%;}
.ui-datepicker table {margin-bottom: 0;}
.ui-datepicker th {height: 19px; font-weight: 400; font-size: 14px; border-bottom: 1px solid #666;}
.ui-datepicker td a.ui-state-default {width: 32px; height: 32px; line-height: 29px; font-size: 14px; color: #666; text-align: center; border: 0;}
.ui-datepicker td a.ui-state-active {background: #008ba1; color: #fff;}
.ui-datepicker td a.ui-state-highlight {background: none; border: 1px solid #008ba1;}


/* Color */
.white {color: #fff !important;}
.black {color: #000 !important;}
.darkgray {color: #333 !important;}
.lightgray {color: #999 !important;}
.red {color: #b03535 !important;}
.chorale {color: #fe6a5e  !important;}
.blue {color: #2b9cf0 !important;}
.mint {color: #4dcbbb !important;}
.jade {color: #008ba1 !important;}
.green {color: #0a6b7b !important;}
.yellow {color: #ff9d23 !important;}
.skyblue {color: #00aeff !important;}


/* Background */
.bg_none {background: none !important;}

.bg_lightgray {background: #f4f4f4;}


.clear { clear:both; }
.clear::after { content:""; display: block; clear:both; }


/* Btn */
.btn_wrap:after {display: block; visibility: hidden; clear: both; content: "";}
.btn {display: inline-block; height: 40px; padding: 0 15px; line-height: 38px; font-size: 14px; text-align: center; -webkit-border-radius: 0;-moz-border-radius: 0; border-radius: 0; vertical-align: top; cursor: pointer;}

.btn_wrap .btn {width:135px; padding:0;}

.btn_blue {color:#fff !important; background: #2b9cf0; border: 1px solid #2b9cf0 !important;}
.btn_lightblue {color:#fff !important; background: #50b4ff; border: 1px solid #50b4ff !important;}
.btn_chorale {color:#fff !important; background: #fe6a5e; border: 1px solid #fe6a5e !important;}
.btn_jade {color:#fff !important; background: #008ba1; border: 1px solid #008ba1 !important;}
.btn_green {color:#fff !important; background: #0a6b7b; border: 1px solid #0a6b7b !important;}
.btn_lightgray {color:#fff !important; background: #999; border: 1px solid #999 !important;}
.btn_yellow {color:#fff !important; background: #f9b43b; border: 1px solid #f9b43b !important;}

.btn_round {border-radius: 50px;}

.btn_close {display: inline-block; width: 14px; height: 14px; padding: 0; line-height: 14px; background: url('../../images/common/ic_close.png') center center no-repeat; vertical-align: top;}


/* Icon */
.icon {display: inline-block; text-indent: -9999px;}

.ic_spearker {width: 26px; height: 21px; background: url('../../images/common/ic_speaker.png') center center no-repeat;}
.ic_lock {width: 18px; height: 23px; background: url('../../images/common/ic_lock.png') center center no-repeat;}
.ic_clip {width: 7px; height: 14px; background: url('../../images/common/ic_clip.png') center center no-repeat;}


/* Label */
.label {display: inline-block; padding: 1px 3px; font-size: 14px;}

.label_consultation {height: 30px; padding: 0 15px; line-height: 26px; font-size: 13px; font-weight: 400; color: #fe6a5e; background: #fff; border-radius: 50px; border: 2px solid #fe6a5e;} /* 상담접수 */
.label_completed {height: 30px; padding: 0 15px; line-height: 30px; font-size: 13px; font-weight: 400; color: #999; background: #ddd; border-radius: 50px;} /* 상담완료 */







/************************************************************************************
Header st.
*************************************************************************************/
/* 상단 배너 */
.top_banner {position: relative; background: #f1f1f1; transition: all.2s ease;}
.top_banner .inner {position: relative;}
.top_banner li {float: left; width: 50%;}
.top_banner li a {display: block;}
.top_banner li dl {padding: 30px 0 30px 110px;}
.top_banner li dl dt {font-size: 16px; line-height: 18px;}
.top_banner li dl dd {margin: 5px 0; font-size: 14px; line-height: 14px; color: #666; letter-spacing: -1px;}
.top_banner .todayClose {position: absolute; right: 0; bottom: 5px;}
.top_banner .todayClose .check_style1 {margin-bottom: 3px; margin-right: 5px;}

.top_banner li:nth-child(1) dl {border-right: 1px solid #e8dd92;}
.top_banner li:nth-child(2) dl {padding-left: 130px;}

/* 주메뉴 */
header {position: relative; z-index: 30;}

.header_wrap .logo {display: block; float: left; width: 285px; height: 70px; background: url('../../images/common/logo.png') left center no-repeat;}

.header_wrap .gnb_wrap {float: right; width: calc(100% - 285px);}

.header_wrap .gnb_wrap .gnb {text-align: right;}
.header_wrap .gnb_wrap .gnb .depth1>li {display: inline-block; position: relative; padding: 0 41px;}
.header_wrap .gnb_wrap .gnb .depth1>li>a {display: block; height: 70px; padding: 0 20px; line-height: 70px; font-size: 16px; border-bottom: 3px solid #fff;}
.header_wrap .gnb_wrap .gnb .depth1>li:first-child.active>a,
.header_wrap .gnb_wrap .gnb .depth1>li:first-child:hover>a {font-weight: 600; color: #f73360;}
.header_wrap .gnb_wrap .gnb .depth1>li:nth-child(2).active>a,
.header_wrap .gnb_wrap .gnb .depth1>li:nth-child(2):hover>a {font-weight: 600; color: #f9b43b;}
.header_wrap .gnb_wrap .gnb .depth1>li:nth-child(3).active>a,
.header_wrap .gnb_wrap .gnb .depth1>li:nth-child(3):hover>a {font-weight: 600; color: #50b4ff;}
.header_wrap .gnb_wrap .gnb .depth1>li:last-child.active>a,
.header_wrap .gnb_wrap .gnb .depth1>li:last-child:hover>a {font-weight: 600; color: #008ba1;}

.header_wrap .gnb_wrap .gnb .depth2 {display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 10px 0; text-align: center; z-index: 2; background-size: 100% 100% !important;}
.header_wrap .gnb_wrap .gnb .depth2>li>a {display: inline-block; margin: 2px 0; padding: 5px 0; font-size: 16px; color: #fff; border-bottom: 1px solid transparent;}
.header_wrap .gnb_wrap .gnb .depth2>li>a span {display: block;}
.header_wrap .gnb_wrap .gnb .depth2>li.active>a,
.header_wrap .gnb_wrap .gnb .depth2>li:hover>a {font-weight: 500; border-bottom: 1px solid #ddd;}


.header_wrap .gnb_wrap .gnb .depth1>li:first-child .depth2 {background: url('../../images/common/bg_gnb1.png') center center no-repeat;}
.header_wrap .gnb_wrap .gnb .depth1>li:nth-child(2) .depth2 {background: url('../../images/common/bg_gnb3.png') center center no-repeat;}
.header_wrap .gnb_wrap .gnb .depth1>li:nth-child(3) .depth2 {background: url('../../images/common/bg_gnb4.png') center center no-repeat;}
.header_wrap .gnb_wrap .gnb .depth1>li:last-child .depth2 {background: url('../../images/common/bg_gnb2.png') center center no-repeat;}

.header_wrap .gnb_wrap .gnb .depth1>li.open .depth2 {display: block !important;}

.header_wrap .gnb_wrap .gnb .depth3 {display: none;}

.header_wrap .gnb_bg {display: none; position: absolute; top: 70px; left: 0; right: 0; height: 290px; background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(221, 221, 221, 0.9); z-index: 1;}





/************************************************************************************
Footer st.
*************************************************************************************/
footer {background: #edecee; border-top: 1px solid #ddd;}

.footer_wrap {text-align: center;}

.footer_wrap .foot_menu {padding: 20px 0 15px; font-size: 0;}
.footer_wrap .foot_menu li {display: inline-block; vertical-align: top;}
.footer_wrap .foot_menu li a {display: block; height: 15px; padding: 0 15px; line-height: 14px; font-size: 14px; color: #999; border-left: 1px solid #d1d1d1;}
.footer_wrap .foot_menu li:first-child a {padding-left: 0; border-left: 0;}
.footer_wrap .foot_menu li:first-child a.color {color: #314358;}

.footer_wrap .foot_copy {padding: 0 0 20px;}
.footer_wrap .foot_copy .logo {display: block; float: left; width: 280px; height: 60px; background: url('../../images/common/foot_logo.png') left center no-repeat;}
.footer_wrap .foot_copy p {float: left; width: 100%; padding-left: 25px; font-size: 14px; line-height: 26px; color: #999;}
.footer_wrap .foot_copy p span {display: inline-block; padding: 0 10px;}





/************************************************************************************
Main st.
*************************************************************************************/
.main_contents {}

/* 비주얼 */
.main_contents .visual_wrap {position: relative;}
.main_contents .visual {position: relative; width: 100%; height: 400px; overflow: hidden; z-index: 1;}
.main_contents .visual .visual_slide li {height: 400px; background-size: auto 400px; text-indent: -9999px;}

.main_contents .visual .bx-wrapper .bx-pager,
.main_contents .visual .bx-wrapper .bx-controls-auto {bottom: 15px;}
.main_contents .visual .bx-wrapper .bx-pager.bx-default-pager .bx-pager-item {vertical-align: top;}
.main_contents .visual .bx-wrapper .bx-pager.bx-default-pager a {width: 13px; height: 13px; margin: 0 3px; background: #fff; border-radius:50%;}
.main_contents .visual .bx-wrapper .bx-pager.bx-default-pager a:hover,
.main_contents .visual .bx-wrapper .bx-pager.bx-default-pager a.active {background: none; border: 3px solid #fff;}

/* 메인 퀵링크 */
.main_contents .cont1 {position: absolute; left: 0; top: 0; right: 0; z-index: 3;}
.main_contents .cont1>div {text-align: right; font-size: 0;}
.main_contents .cont1>div ul {display: inline-block; vertical-align: top;}
.main_contents .cont1>div ul:nth-child(1) {margin-top: 72px;}
.main_contents .cont1>div ul:nth-child(2) {margin-top: 45px;}
.main_contents .cont1 li {width: 200px; margin-top: 5px; margin-left: 7px;}
.main_contents .cont1 li a {display: block; height: 145px; padding: 22px 10px; font-size: 0; line-height: 22px; font-weight: 500; text-align: center; color: #fff; background: url('../../images/main/bg_quick.png') center center no-repeat;}
.main_contents .cont1 li:last-child a {border-right: 0;}
.main_contents .cont1 li a p {margin-top: 5px; font-size: 20px; letter-spacing: -0.5px;}
.main_contents .cont1 li a p span {display: block; font-size: 15px;}
.main_contents .cont1 li a p.line1 {margin-top: 15px;}

.main_contents .cont1>div ul:nth-child(1) li:nth-child(1) a:hover {background: url('../../images/main/bg_quick01.png') center center no-repeat;}
.main_contents .cont1>div ul:nth-child(1) li:nth-child(2) a:hover {background: url('../../images/main/bg_quick02.png') center center no-repeat;}
.main_contents .cont1>div ul:nth-child(2) li:nth-child(1) a:hover {background: url('../../images/main/bg_quick03.png') center center no-repeat;}
.main_contents .cont1>div ul:nth-child(2) li:nth-child(2) a:hover {background: url('../../images/main/bg_quick04.png') center center no-repeat;}

/* 메인 콘텐츠 */
.main_contents .cont2 {padding: 0 0 30px; font-family: 'Noto Sans KR', sans-serif;}

.main_contents .cont2 .box {float: left;}
.main_contents .cont2 .box_title {position: relative; height: 50px; margin: 0; padding: 0; line-height: 50px; font-size: 20px; font-weight: 500; background: none;}
.main_contents .cont2 .box_title .btn_more {position: absolute; right: 0; top: 13px; height: 22px; padding: 0 25px 0 0; line-height: 22px; font-size: 13px; color: #666; background: url('../../images/main/ic_more.png') right center no-repeat; vertical-align: middle;}

.main_contents .cont2 .main_consult {position: relative; float: none; width: 100%; height: 85px; margin-bottom: 20px; font-size: 0; background: #1d2e66; z-index: 1;}
.main_contents .cont2 .main_consult .inner { height: 100%; }
.main_contents .cont2 .main_consult .box_cont { height: 100%; display: flex; align-items: center; justify-content: center;}
.main_contents .cont2 .main_consult .box_cont > li { position: relative; margin-top: -9px; height: calc(100% + 9px); background-size: 100% 100%; background-position: right top; }
.main_contents .cont2 .main_consult .box_cont > li:before { content:""; display: block; width: 1px; position: absolute; right: 0; top: calc(20% + 9px); bottom: 20%; background: #29408f; }
.main_contents .cont2 .main_consult .box_cont > li:last-child:before { display: none; }
.main_contents .cont2 .main_consult .box_cont > li:hover { background-image: url('../../images/main/bg_consult2.png'); }
.main_contents .cont2 .main_consult .box_cont > li > a { line-height: 1.2; display: flex; padding: 0 50px; padding-top: 4.5px; height: 100%; align-items: center; justify-content: center; word-break: keep-all; color: #fff; text-align: center; font-size: 20px; font-weight: 500; vertical-align: top; }
.main_contents .cont2 .main_consult .box_cont > li > a img {margin-right: 12px;}

.main_contents .cont2 .main_board {float: left; width: 450px; padding-right: 50px;}
.main_contents .cont2 .main_board .box_title  {margin-bottom: 5px;}
.main_contents .cont2 .main_board .box_cont ul li {display: block;}
.main_contents .cont2 .main_board .box_cont ul li a {display: inline-block; max-width: 100%; padding-left: 15px; line-height: 23px; font-size: 16px; background: url('../../images/main/ic_bul.png') left center no-repeat; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.main_contents .cont2 .main_board .main_notice {margin-bottom: 10px;}

.main_contents .cont2 .main_event {float: right; width: calc(100% - 450px);}
.main_contents .cont2 .main_event .box_title  {margin-bottom: 12px;}
.main_contents .cont2 .main_event .box_cont .event_slide li a {position: relative; display: block; height: 160px; padding: 0 10px;}
.main_contents .cont2 .main_event .box_cont .event_slide li a .img_wrap {overflow: hidden;}
.main_contents .cont2 .main_event .box_cont .event_slide li a .img_wrap .img_box img {width: 100% !important; height: 100% !important;}
.main_contents .cont2 .main_event .box_cont .event_slide li a dl {display: none; position: absolute; top: 0; left: 10px; right: 10px; bottom: 0; padding: 0 15px; text-align: left; background: rgba(37, 207, 204, 0.9);}
.main_contents .cont2 .main_event .box_cont .event_slide li a dl dt {padding-top: 60px; font-size: 18px; font-weight: 500; line-height: 20px; color: #fff; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden}
.main_contents .cont2 .main_event .box_cont .event_slide li a dl dd {margin-top: 5px; font-size: 15px; font-weight: 100; color: #c5fffc;}
.main_contents .cont2 .main_event .box_cont .event_slide li a:hover dl {display: block;}

.main_contents .cont2 .bx-wrapper .bx-controls-direction a {width: 40px; height: 40px; margin-top: -20px;}
.main_contents .cont2 .bx-wrapper .bx-controls-direction a.bx-prev {left: -50px; background: url('../../images/main/btn_prev.png') center center no-repeat;}
.main_contents .cont2 .bx-wrapper .bx-controls-direction a.bx-next {right: -50px; background: url('../../images/main/btn_next.png') center center no-repeat;}

/* 메인 배너 */
.main_contents .main_banner {background: #edecee; border-top: 1px solid #ddd;}
.main_contents .main_banner .inner {position: relative;}

.main_contents .main_banner .bx-wrapper {padding: 18px 0;}
.main_contents .main_banner .bx-wrapper .bx-viewport {width: calc(100% - 160px) !important;}
.main_contents .main_banner .bx-wrapper .banner_slide li a img {margin: 0 auto;}
.main_contents .main_banner .bx-wrapper .bx-controls-direction a {width: 80px; height: 69px; top: 0;}
.main_contents .main_banner .bx-wrapper .bx-controls-direction a.bx-prev {left: auto; right: 80px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; background: #edecee url('../../images/main/ic_arrow_prev.png') center center no-repeat;}
.main_contents .main_banner .bx-wrapper .bx-controls-direction a.bx-next {right: 0; border-right: 1px solid #ddd; background: #edecee url('../../images/main/ic_arrow_next.png') center center no-repeat;}

/* 사이트맵 팝업 */
#sitePop {}
#sitePop .popup_inner {width: 100%; height: 100%; margin: 0; overflow-y: auto; border: 0;}
#sitePop .popup_contents {width: 1000px; margin: 0 auto; padding: 50px 0;}
#sitePop .popup_contents dl {float: left; width: 22%; margin-right: 4%;}
#sitePop .popup_contents dl:last-child {margin-right: 0;}
#sitePop .popup_contents dl dt {height: 70px; padding: 0 20px; font-size: 22px; font-weight: 500; line-height: 70px; border-top: 2px solid #4dcbbb; border-bottom: 1px solid #ddd;}
#sitePop .popup_contents dl dd {padding: 15px 20px;}
#sitePop .popup_contents dl dd>ul>li>a {display: block; padding: 11px 0 11px 15px; font-size: 16px; font-weight: 500; color: #555; background: url('../../images/common/ic_bul.png') left top 21px no-repeat;}
#sitePop .popup_contents dl dd>ul>li ul {padding: 0 15px;}
#sitePop .popup_contents dl dd>ul>li ul li a {display: block; position: relative; padding: 6px 0 6px 10px; font-size: 15px; font-weight: 500; color: #888;}
#sitePop .popup_contents dl dd>ul>li ul li a:before {position: absolute; left: 0; top: 5px; content: "-";}





/************************************************************************************
Contents st.
*************************************************************************************/
html {min-width: 320px;}

.inner {position: relative; width: 1024px; margin: 0 auto;}
.inner:after {display: block; visibility: hidden; clear: both; content: "";}
.contents {}
.sub_contents {min-height: 680px;}


/* Quick menu */
.quick_menu {position: absolute; right: 0; top: 325px; padding-right: 55px;}
.quick_menu.active {position: fixed; top: 10px;}
.quick_menu ul {position: relative; background: url('../../images/common/bg_quickmenu01.png') center top no-repeat;}
.quick_menu ul li a {display: block; width: 100px; height: 100px; padding-top: 20px; font-size: 15px; font-weight: 500; color: #fff; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.7);}
.quick_menu ul li a img {display: block; margin: 0 auto 7px;}
.quick_menu ul li.go_top {position: absolute; bottom: -111px; left: -52px; text-align: center;}
.quick_menu ul li.go_top a {width: 204px; height: 163px; padding-top: 70px; color: #fff; font-size: 16px; font-weight: 500; background: url('../../images/common/bg_quickmenu02.png') center center no-repeat;}

.quick_menu2 { position: absolute; right: 0; top: 325px; padding-right: 55px; }
.quick_menu2.active {position: fixed; top: 10px;}
.quick_menu2 ul { border: 1px solid #50b4ff; border-radius: 15px; overflow: hidden; padding: 15px 0; width: 92px; background-color: #fff; }
.quick_menu2 ul li { padding: 5px 0; text-align: center; letter-spacing: -1px; }
.quick_menu2 ul li a { display: block; padding: 5px; font-size: 14px; color: #666; }
.quick_menu2 ul li a:before { content:""; display: block; width: 25px; height: 23px; margin: 0 auto; margin-bottom: 5px; transition: all 1s; background-size: contain; background-position: center; background-repeat: no-repeat; }
.quick_menu2 ul li.list1 a:before { background-image: url(../../images/quick/icon_quick1.svg); }
.quick_menu2 ul li.list2 a:before { background-image: url(../../images/quick/icon_quick2.svg); }
.quick_menu2 ul li.list3 a:before { background-image: url(../../images/quick/icon_quick3.svg); }
.quick_menu2 ul li.list4 a:before { background-image: url(../../images/quick/icon_quick4.svg); }
.quick_menu2 ul li.list5 a:before { background-image: url(../../images/quick/icon_quick5.svg); }
.quick_menu2 ul li.list6 a:before { background-image: url(../../images/quick/icon_quick6.svg); }
.quick_menu2 ul li.list7 a:before { background-image: url(../../images/quick/icon_quick7.svg); }
.quick_menu2 ul li a:hover { color: #50b4ff; }
.quick_menu2 ul li a:hover:before { transform: rotateY(360deg); }
.quick_menu2 .go_top { margin-top: 20px; }
.quick_menu2 .go_top a { background: #50b4ff url(../../images/quick/top.png) no-repeat center; border-radius: 100%; width: 90px; height: 90px; margin: 0 auto; display: block; white-space: nowrap; overflow: hidden; text-indent: 100%; }

/* Sub visual */
.sub_visual {display: table; width: 100%; height: 180px; background-size: 100% 100% !important;}
.sub_visual p {display: table-cell; text-align: center; vertical-align: middle; font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 2px; font-family: 'NanumSquare', sans-serif;}
.sub_visual p strong {display: block; margin-bottom: 10px; font-weight: 600; font-size: 34px; letter-spacing: 0;}


/* Page Root */
.page_root {position: absolute; right: 0; top: 45px; text-align: right; z-index: 10;}
.page_root a {display: inline-block; height: 13px; padding-right: 18px; padding-left: 5px; line-height: 13px; font-size: 14px; color: #888; vertical-align: middle; background: url('../../images/common/ic_arrow_root.png') right 1px center no-repeat;}
.page_root .home {display: inline-block; width: 28px; height: 13px; padding-left: 0; text-align: left; text-indent: -9999px; background: url('../../images/common/ic_home_gray.png') left center no-repeat, url('../../images/common/ic_arrow_root.png') right center no-repeat #fff;}
.page_root a:last-child {padding-right: 0; color: #333; background: none;}

.page_root div.select {position: relative; display: inline-block; height: auto; margin-right: 10px; padding: 10px 27px 10px 5px; line-height: 20px; font-size: 14px; vertical-align: middle; background: url('../../images/common/arr_bottom.png') right center no-repeat; background-size: auto 22px; cursor: pointer;} 
.page_root div.select:after {position: absolute; right: -13px; top: 0; width: 10px; height: 40px; background: url('../../images/common/ic_arrow_root.png') right center no-repeat; content: "";} 
.page_root div.select:last-child {margin-right: 0; color: #000;} 
.page_root div.select:last-child:after {display: none;} 

.page_root div.select:hover {font-weight: 600; color: #000;} 
.page_root div.select:hover ul.select_list {display: block;}

.page_root div.select ul.select_list {display: none; position: absolute; top: 100%; right: 0; padding: 5px 0; border: 1px solid #ddd; background: #fff;} 
.page_root div.select ul.select_list a {display: block; height: auto; padding: 0 10px; font-size: 14px; line-height: 26px; font-weight: 400; text-align: center; color: #666;} 
.page_root div.select ul.select_list a:hover,
.page_root div.select ul.select_list a.active {font-weight: 600; color: #222;} 

.page_root div.select1 ul.select_list {width: 130px;} 
.page_root div.select2 ul.select_list {width: 170px;} 
.page_root div.select2-1 ul.select_list {width: 130px;} 
.page_root div.select2-2 ul.select_list {width: 150px;} 
.page_root div.select3 ul.select_list {width: 150px;} 
.page_root div.select3-1 ul.select_list {width: 200px;} 
.page_root div.select3-2 ul.select_list {width: 130px;} 


/* Title */
.page_title {position: relative; font-size: 28px; font-weight: 500; color: #222; font-family: 'NanumSquare', sans-serif;}

.page_title + * {margin-top: 20px !important;}
.page_title + * .box_title {margin-top: 20px !important;}


/* Search */
.search_wrap {position: relative;}
.search_wrap>* {display: inline-block; vertical-align: top; margin-right: 1px; font-size: 15px;}
.search_wrap select {width: 100px; margin-right: 5px; /* border: 0; border-bottom: 1px solid #000; */ background-size: 12px !important; vertical-align: top;}
.search_wrap input[type='text'] {width: 230px; padding-right: 50px;}
.search_wrap .btn {position: absolute; right: 0; top: 0; width: 40px; height: 40px; background: #555 url('../../images/common/ic_search.png') center center no-repeat; border: 0; text-indent: -9999px;}


/* Tab */
.tab_wrap {}


/* Sort */
.sort_wrap>* {display: inline-block;}


/* Text */ 
.info_text {margin-top: 40px; padding: 20px 25px; background: #f3f3f3;}


/* Board */
.board_option {margin: 20px 0;}

.board_list {margin-top: 20px;}
.board_list table {width: 100%; border-top: 1px solid #222; border-bottom: 1px solid #ddd; table-layout: fixed;}
.board_list table th {height: 45px; font-weight: 500; text-align: center; font-size: 15px; color: #444; border-bottom: 1px solid #ddd; background: #fff;}
.board_list table td {height: 45px; font-size: 14px; text-align: center; font-weight: 300; color: #999; border-bottom: 1px solid #ddd;}
.board_list table td.subject {text-align: left; padding: 0 10px 0 20px;}
.board_list table td a {display: inline-block; max-width: 100%; height: 40px; line-height: 40px; font-weight: 400; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; vertical-align: middle;}
.board_list table td strong {color: #666;}
.board_list .search_wrap {margin-top: 30px;}

.board_view .view_title {padding: 20px 20px 10px; font-size: 18px; font-weight: 500; line-height: 20px; border-top: 1px solid #222; background: #fff;}
.board_view .view_info {padding: 10px 20px 15px; font-size: 14px; border-bottom: 1px solid #ddd; background: #fff;}
.board_view .view_info p span {display: inline-block; height: 15px; padding: 0 10px; line-height: 15px; font-size: 14px; color: #999; border-left: 1px solid #e6e6e6;}
.board_view .view_info p span:first-child {padding-left: 0; border-left: 0;}
.board_view .view_info dl dt {padding-right: 15px;}
.board_view .view_info dl dd {color: #666;}
.board_view .view_info .view_file {position: relative;}
.board_view .view_info .view_file p {display: block; font-size: 14px; font-weight: 500; cursor: pointer; padding-left: 17px; background: url('../../images/common/ic_clip.png') left center no-repeat;}
.board_view .view_info .view_file .view_file_list {display: none; position: absolute; top: 31px; right: -20px; width: 200px; padding: 15px; background: #fff; border: 1px solid #222;}
.board_view .view_info .view_file .view_file_list a {display: block; font-size: 12px;}
.board_view .view_contents {min-height: 250px; margin-bottom: 20px; padding: 20px; font-size: 14px; line-height: 26px; border-bottom: 1px solid #ddd;}
.board_view .view_contents img {max-width: 100%;}

.board_write {margin-top: 40px;}
.board_write table {width: 100%; border-top: 1px solid #222; border-bottom: 1px solid #ddd; table-layout: fixed;}
.board_write th {height: 50px; padding: 5px 20px; text-align: left; font-weight: 400; font-weight: 400; font-size: 15px; color: #555; border-bottom: 1px solid #ddd;}
.board_write td {height: 50px; padding: 5px 20px; font-size: 15px; font-weight: 300; color: #555; border-bottom: 1px solid #ddd;}
.board_write td select {width: 100%;}
.board_write td textarea {width: calc(100% - 22px); height: 300px;}
.board_write td input[type='text'] {width: calc(100% - 32px);}
.board_write .btn_wrap {margin-top: 20px;}

.comments_wrap {margin: 50px 0 0; border-top: 1px solid #222;}
.comments_wrap .title {padding: 15px 0; font-size: 14px; font-weight: 500;}
.comments_wrap .write_com textarea {width: calc(90% - 20px); height: 50px; padding: 10px;}
.comments_wrap .write_com .btn_gray {width: 9.8%; height: 72px; font-size: 14px;}
.comments_wrap .list_com {margin: 10px 0 30px;}
.comments_wrap .list_com li {position: relative; padding: 10px 0; border-bottom: 1px solid #ddd;}
.comments_wrap .list_com li:last-child {border-bottom: 1px solid #ddd;}
.comments_wrap .list_com dt {margin-bottom: 10px; font-size: 15px;}
.comments_wrap .list_com dt .date {padding-left: 10px; font-size: 12px; color: #999;}
.comments_wrap .list_com dd {font-size: 14px; line-height: 16px;}
.comments_wrap .list_com li>.btn {position: absolute; right: 10px; top: 10px; min-width: 0; width: auto; height: auto; padding: 0; font-size: 12px; line-height: normal; color: #666; background: none; border: 0;}
.comments_wrap .list_com li>.btn.btn_delete {min-width: 12px; height: 12px; background: #fff url('../../images/common/*.png') center center no-repeat; border: 0; text-indent: -9999px; background-size: 12px;}
.comments_wrap .list_com li.re_com {padding: 10px 0 10px 30px;}
.comments_wrap .list_com li.re_com:after {position: absolute; left: 5px; top: 10px; content: "└"; font-size: 19px; font-weight: 500;}
.comments_wrap .list_com li.re_com textarea {width: calc(89.9% - 20px);}


/* Form */
.form_write {margin-top: 40px;}

.form_write ul {border-top: 1px solid #222;}
.form_write ul li {width: 100%; border-bottom: 1px solid #ddd;}
.form_write ul li:after {display: block; visibility: hidden; clear: both; content: "";}
.form_write ul li dl {display: table; float: left; min-height: 50px;}
.form_write ul li.column1 dl {width: 100%;}
.form_write ul li.column2 dl {width: 50%;}
.form_write ul li dl>* {display: table-cell; vertical-align: middle; padding: 5px 20px}
.form_write ul li dl dt {width: 150px; font-size: 15px;}
.form_write ul li dl dd {width: calc(100% - 150px); font-size: 14px;}
.form_write ul li dl dd select {width: 100%;}
.form_write ul li dl dd select.type1 {width: 49.5%;}
.form_write ul li dl dd select.type2 {width: 80px;}
.form_write ul li dl dd textarea {width: calc(100% - 22px); height: 100px;}
.form_write ul li dl dd input[type='text'] {width: calc(100% - 32px);}
.form_write ul li dl dd input[type='text'].type1 {width: 290px;}
.form_write ul li dl dd input[type='text'].type2 {width: 475px;}
.form_write ul li dl dd input[type='text'].type3 {width: 50px;}
.form_write ul li dl dd input[type='text'].type4 {width: 190px;}
.form_write ul li dl dd input[type='text'].type5 {width: 140px;}

.form_view ul li dl dd {color: #999;}


/* Paging */
.paging {margin-top: 20px; text-align: center;}
.paging a {display: inline-block; vertical-align: top; width: 40px; height: 40px; line-height: 40px; font-size: 14px; font-weight: 900; border-radius: 50%;}
.paging a.active {color: #0a6b7b; background: #fff; border: 1px solid #0a6b7b;}
.paging a.btn_prev {background: url('../../images/common/ic_prev_db.png') center center no-repeat; text-indent: -9999px;}
.paging a.btn_prev_db {background: url('../../images/common/ic_prev.png') center center no-repeat; text-indent: -9999px;}
.paging a.btn_next {background: url('../../images/common/ic_next.png') center center no-repeat; text-indent: -9999px;}
.paging a.btn_next_db {background: url('../../images/common/ic_next_db.png') center center no-repeat; text-indent: -9999px;}


/* Img wrap */
.img_wrap {position: relative; width: 100%; height: 0; padding-bottom: 83%; overflow: hidden;}
.img_wrap .img_box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.img_wrap .img_box img {display: block; height: 100%;}
.img_wrap .img_box .img_cate { position: absolute; left: 10px; top: 10px; z-index: 1; }


/* Text wrap */
.line1_cut {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.line2_cut {display: -webkit-box; height: 40px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word;}
.line2_cut {display: -webkit-box; height: 60px; line-height: 20px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap:break-word;}



/* 상담신청 - 개인상담 */
.consult_visual {background: #fe6a5e url('../../images/consult/bg_visual.png') center center no-repeat;}

.personal {padding: 45px 0 100px;}

.box {}
.box .box_title {margin: 25px 0 15px; padding-left: 10px; font-size: 20px; font-weight: 500; color: #222; background: url('../../images/common/ic_bul.png') left top 14px no-repeat;}
.box .box_cont {}

.agree_box textarea {height: 150px;}
.agree_box .text_box {height: 150px; margin-bottom: 8px; padding: 10px; border: 1px solid #ddd; overflow-y: auto;}
.agree_box span.check_style1 {display: block; width: 100%; margin-bottom: 8px;}
.agree_box span.under_check {display: none;}

.personal .label {font-weight: 500;}
.personal .label b {font-weight: 500;}

.personal .box .box_title {background: url('../../images/common/ic_bul_red.png') left top 10px no-repeat;}
.personal .box .box_title .btn_print {width: 55px; height: 40px; margin-top: -11px; padding: 0; text-indent: -9999px; background: url('../../images/consult/btn_print.png') center center no-repeat; background-size: 100%; border: 0;}
.personal .btn_wrap {margin-top: 30px;}

.personal .btn_down {height: auto; margin-top: -3px; margin-left: 5px; padding: 3px 10px 3px 25px; color: #fff; font-weight: 300; line-height: normal; background: #999 url('../../images/consult/icon_btn_download.png') left 10px center no-repeat; border-radius: 3px;}

/* 상담신청 - 사이버상담 */
.cyber {padding: 45px 0 100px;}

.cyber .label {font-weight: 500;}
.cyber .label b {font-weight: 500;}

.cyber .search_wrap .btn {background: #fe6a5e url('../../images/common/ic_search.png') center center no-repeat;}
.cyber .box .box_title {background: url('../../images/common/ic_bul_red.png') left top 10px no-repeat;}
.cyber .paging a.active {color: #fe6a5e; border: 1px solid #fe6a5e;}
.cyber .btn_wrap {margin-top: 30px;}

/* 비밀번호 팝업 */
#passwordPop {}
#passwordPop .popup_inner {width: 520px;}
#passwordPop .popup_contents {padding: 35px 0;}
#passwordPop .popup_contents .pop_info_text {padding: 20px 0;}
#passwordPop .popup_contents input[type='password'] {width: 250px; margin-bottom: 20px;}



/* 센터소개 - 센터소개 */
.center_visual {background: #008ba1 url('../../images/centerInfo/bg_visual.png') center center no-repeat;}

.info {padding: 45px 0 100px; color: #666; font-size: 16px;}

.info img.img_info {display: block; width: 457px; margin: 0 auto 20px;}
.info p.text {padding: 15px 20px; line-height: 26px; background: #f3f3f3; text-align: center;}
.info p.text strong {font-weight: 900; color: #666!important;}
.info .circle_box {margin: 40px 0 45px; padding: 15px; text-align: center; background: #edecee;}
.info .circle_box li {display: inline-block; width: 155px; height: 155px; margin: 0 15px; background: #fff; border-radius: 50%;}
.info .circle_box li img {margin: 35px 0 15px;}
.info .history {margin-top: 20px;}
.info .history li {margin-bottom: 10px;}
.info .history li dl dt {display: inline-block; width: 140px; font-size: 58px; letter-spacing: -6px; font-family: 'NanumSquare', sans-serif;}
.info .history li:nth-child(odd) dl dt {color: #3ca6b7;}
.info .history li:nth-child(even) dl dt {color: #ddd;}
.info .history li dl dd {display: inline-block; width: calc(100% - 150px); line-height: 26px;}
.info .history li dl dd p strong {display: inline-block; width: 55px; color: #333; font-weight: 500;}
.info .history li dl dd p span {display: inline-block; width: calc(100% - 60px);}

/* 센터소개 - 인사말 */
.greeting {padding: 45px 0 100px;}
.greeting .greeting_txt_wrap { display: flex; align-items: flex-start; }
.greeting .greeting_img { flex:0 0 auto; margin-right: 40px; }
.greeting .greeting_txt { font-size: 16px; color: #666; line-height: 1.5; padding-top: 28px; }
.greeting .greeting_txt .txt { margin-bottom: 20px; }
.greeting .greeting_txt .txt:last-child { margin-bottom: 0; }
.greeting .greeting_txt .txt.txt1 { margin-bottom: 20px; color: #333; line-height: 1.3; }
.greeting .greeting_txt .txt.txt1 .point { font-size: 20px; font-weight: 500; }
.greeting .greeting_txt .txt.txt2 { color: #333; }
.greeting .greeting_txt .txt.txt2 .point { font-size: 16px; font-weight: 500; }
.greeting .greeting_txt .txt.txt3 { text-align: right; font-size: 14px; color: #333; }
.greeting .greeting_txt .txt.txt3 .sign { margin-left: 15px; display: inline-block; }

/* 센터소개 - 조직도 */
.organization {padding: 45px 0 100px;}

.organization .tree {z-index: 1;}   
.organization .tree>img {max-width: 100%;}

.organization .tree .round_box {width: 218px; height: 50px; margin: 0 auto; line-height: 50px; font-size: 18px; font-weight: 500; color: #fff; text-align: center;}
.organization .tree .pink {background: #f55d8c;}
.organization .tree .bg_skyblue {background: #50b4ff;}
.organization .tree .bg_jade {background: #008ba1;}
.organization .tree .bg_yellow {background: #f9b43b;}
.organization .tree .bg_chorale {background: #fe6a5e;}
.organization .tree .bg_mint {background: #46b2c3; height: 80px; line-height: 25px; padding-top: 15px;}
.organization .tree ul li {width: 218px;}
.organization .tree a {color: #fff !important;}
.organization .tree dl {padding: 10px 10px; background: #f8f8f8;}
.organization .tree dl dt {margin: 0 0 3px; font-size: 14px; font-weight: 900; line-height: 24px;}
.organization .tree dl dd {font-size: 14px; font-weight: 400; line-height: 22px; color: #666; letter-spacing: -1px; -ms-word-break: keep-all; word-break: keep-all;}
.organization .tree dl.list dd {position: relative; padding-left: 10px;}
.organization .tree dl.list dd:before {position: absolute; top: 0; left: 0; width: 4px; height: 100%; content: ""; background: url('../../images/centerInfo/ic_bul.png') center top 8px no-repeat;}

.organization .tree .area1 {position: relative; margin-bottom: 30px; z-index: 1;}
.organization .tree .area1:before {position: absolute; top: 100%; left: 50%; width: 1px; height: 30px; margin-left: -0.5px; content: ""; background: #ddd;}

.organization .tree .area2 {position: relative; margin-bottom: 30px; z-index: 1;}
.organization .tree .area2:before {position: absolute; top: 100%; left: 50%; width: 1px; height: 30px; margin-left: -0.5px; content: ""; background: #ddd;}

/* .organization .tree .area2 {position: relative; z-index: 2;}
.organization .tree .area2:before {position: absolute; top: 24px; left: 218px; right: 512px; height: 1px; content: ""; background: #ddd; z-index: 1;} */

.organization .tree .area3 {position: relative; margin: 0 auto 30px; z-index: 2;}
.organization .tree .area3:before {position: absolute; top: 100%; left: 50%; width: 1px; height: 55px; margin-left: -0.5px; content: ""; background: #ddd;}

.organization .tree .area4 {position: relative; padding-top: 40px; z-index: 2;}
.organization .tree .area4:before {position: absolute; top: 24px; left: 313px; right: 109px; height: 1px; content: ""; background: #ddd;}
.organization .tree .area4 li {position: relative; z-index: 2;}
.organization .tree .area4 li:nth-child(1) {margin-left: 205px;}
.organization .tree .area4 li:before {position: absolute; top: -15px; left: 50%; width: 1px; height: 150px; margin-left: -0.5px; content: ""; background: #ddd; z-index: 1;}
.organization .tree .area4 li:nth-child(1):before {height: 91px;}
.organization .tree .area4 li p {position: relative; z-index: 2;}

.organization .tree .area5 {position: relative; margin-top: 40px; z-index: 2;}
.organization .tree .area5:before {position: absolute; top: 24px; left: 218px; right: 380px; height: 1px; content: ""; background: #ddd;}
.organization .tree .area5 li {position: relative; margin-right: 20px; z-index: 2;}
.organization .tree .area5 li:nth-child(2):before {position: absolute; top: 100%; left: 50%; width: 1px; height: 25px; margin-left: -0.5px; content: ""; background: #ddd; z-index: 1;}
.organization .tree .area5 li:nth-child(4):before {position: absolute; top: 25px; left: 100%; width: 23px; height: 1px; content: ""; background: #ddd; z-index: 1;}
.organization .tree .area5 li dl {height: 95px;}

.organization .tree .area6 {position: relative; margin-top: 50px; z-index: 2;}
.organization .tree .area6:before {position: absolute; top: -25px; left: 109px; right: 507px; height: 1px; content: ""; z-index: 1; background: #ddd;}
.organization .tree .area6 li {position: relative; z-index: 2; margin-right: 190px;}
.organization .tree .area6 li:before {position: absolute; top: -25px; left: 50%; width: 1px; height: 25px; margin-left: -0.5px; content: ""; z-index: 1; background: #ddd;}
.organization .tree .area6 li:nth-child(2) {margin-right: 0;}
.organization .tree .area6 li:nth-child(2) .round_box {margin: 0;}
.organization .tree .area6 li:nth-child(3) {margin-right: 0;}
.organization .tree .area6 li:nth-child(3):before {display: none;}
.organization .tree .area5 li dl {height: 145px;}

.organization .chart {margin-top: 50px;}
.organization .chart table {width: 100%; table-layout: fixed; border-top: 1px solid #3f9ab2;}
.organization .chart table th {height: 40px; font-size: 16px; font-weight: 500; color: #008ba1; border-bottom: 1px solid #ddd;}
.organization .chart table td {height: 35px; padding: 5px; font-size: 14px; line-height: 18px; text-align: center; color: #828282; letter-spacing: -0.5px; border-bottom: 1px solid #ddd; background: #f3f3f3;}
.organization .chart table td.text_left {padding: 5px 40px;}

/* 20190319추가 */
.organization .click_text {display: inline-block; margin-bottom: 45px; padding: 10px 45px; font-size: 0; background: #f3f3f3; border-radius: 50px;}
.organization .click_text > * {display: inline-block; vertical-align: middle;}
.organization .click_text > span {width: calc(100% - 45px); margin-left: 5px; font-size: 16px; font-weight: 500; color: #008ba1;}

/* 센터소개 - 시설현황 */
.facility {padding: 45px 0 100px;}

.facility .facility_list li {width: 24%; margin-right: 1.33%; margin-bottom: 40px;}
.facility .facility_list li:nth-child(4n+4) {margin-right: 0;}
.facility .facility_list li a {display: block;}
.facility .facility_list li a .img_wrap {padding-bottom: 65.2%;}
.facility .facility_list li a p {position: relative; margin-top: 20px; padding-top: 10px; font-size: 16px; font-weight: 500;}
.facility .facility_list li a p:before {position: absolute; top: 0; left: 0; width: 15px; height: 2px; content: ""; background: #008ba1;}

/* 시설현황 팝업 */
#facilityPop {}
#facilityPop .popup_inner {width: 700px; background: none; border: 0;}
#facilityPop .popup_contents .bx-wrapper .bx-viewport {height: 565px !important;}
#facilityPop .popup_contents .bx-wrapper .facility_slide li {width: 700px !important;}
#facilityPop .popup_contents .bx-wrapper .facility_slide li img {width: 696px; border: 2px solid #222;}
#facilityPop .popup_contents .bx-wrapper .facility_slide li p {margin-top: 15px; font-size: 16px; text-align: left; font-weight: 500; color: #ddd;}
#facilityPop .popup_contents .bx-wrapper .bx-controls-direction a {top: 50%; width: 16px; height: 32px; margin-top: -16px;}
#facilityPop .popup_contents .bx-wrapper .bx-controls-direction a.bx-prev {left: -30px; background: url('../../images/centerInfo/ic_arrow_prev.png') center center no-repeat;}
#facilityPop .popup_contents .bx-wrapper .bx-controls-direction a.bx-next {right: -30px; background: url('../../images/centerInfo/ic_arrow_next.png') center center no-repeat;}

/* 센터소개 - 필수연계기관 */
.link {padding: 45px 0 100px; font-size: 0;}

.link .box {display: inline-block; width: 48%; margin-right: 4%; margin-bottom: 20px;}
.link .box .box_title {margin-top: 0;}
.link .box .box_cont table {width: 100%; table-layout: fixed; border-top: 1px solid #3f9ab2;}
.link .box .box_cont table th {height: 40px; font-size: 16px; font-weight: 500; color: #008ba1; border-bottom: 1px solid #ddd;}
.link .box .box_cont table td {height: 35px; padding: 5px; font-size: 14px; line-height: 18px; text-align: center; color: #828282; letter-spacing: -0.5px; border-bottom: 1px solid #ddd; background: #f3f3f3;}
.link .box .box_cont table td.text_left {padding: 5px 40px;}
.link .box .box_cont table.report_table {width: 100%;}

.link .box2 .box_cont table td {height: 37.4px;}

/* 센터소개 - 이용안내 */
.guide {padding: 45px 0 100px;}

.use .box .box_cont {padding-left: 10px; font-size: 16px; line-height: 26px; font-weight: 500;}
.use .box.process li {display: table; position: relative; width: 210px; height: 220px; margin-right: 60px; padding-top: 20px; font-size: 16px; font-weight: 500; text-align: center; background: #eee;}
.use .box.process li:after {position: absolute; top: 50%; right: -40px; width: 18px; height: 35px; margin-top: -17.5px; content: ""; background: url('../../images/centerInfo/ic_arrow_next_gray.png') center center no-repeat;}
.use .box.process li:last-child {margin-right: 0;}
.use .box.process li:last-child:after {display: none;}
.use .box.process li a {display: table; width: 100%; height: 100%;}
.use .box.process li p {display: table-row; height: 90px;}
.use .box.process li p span {display: table-cell; vertical-align: middle; line-height: 22px;}
.use .box .box_cont>span {display: inline-block; vertical-align: top; font-weight: 500;}
.use .box .box_cont>span.jade {font-weight: 400;}

/* 센터소개 - 찾아오시는길 */
.direction {padding: 45px 0 100px;}
.direction .page_title {margin-bottom: 30px;}
.direction .location {  }
.direction .location .txt_area { float: left; width: 50%; padding: 0 30px; }
.direction .location .txt_area .text {  }
.direction .location .txt_area .text .txt_list { margin-bottom: 5px; word-break: keep-all; }
.direction .location .txt_area .text .txt_list dt { display: inline-block; font-size: 20px;  color: #333; font-weight: 500; }
.direction .location .txt_area .text .txt_list dt.sm_txt { font-size: 16px; }
.direction .location .txt_area .text .txt_list dd { display: inline-block; font-size: 18px;  color: #555; margin-left: 10px; }
.direction .location .map_area { float: left; width: 50%; }
.direction .location .map_area > div { width: 100% !important; }
.direction .location .public_transport { margin-top: 20px; }
.direction .use ul li {padding: 10px 0; font-size: 0; border-bottom: 1px solid #ddd;}
.direction .use ul li>* {display: inline-block; vertical-align: top;}
.direction .use ul li>p {width: 150px; text-align: center; font-size: 18px; font-weight: 600;}
.direction .use ul li>p img {width: 90px; margin-bottom: 15px;}
.direction .use ul li dl {width: calc(100% - 150px); padding: 0 0 0 30px;}
.direction .use ul li dl dt {position: relative; font-size: 18px; font-weight: 500;}
.direction .use ul li dl dd {margin-top: 5px; font-size: 16px; color: #333 !important;}
.direction .use ul li dl dd span {display: block; position: relative; font-weight: 500; padding-left: 20px;}
.direction .use ul li dl dd span:before {position: absolute; left: 0; top: 6px; width: 15px; height: 15px; content: ""; border-radius: 50%;}
.direction .use ul li dl dd.blue span:before {background: #0966c5;}
.direction .use ul li dl dd.green span:before {background: #47b50b;}


/* 사업소개 - 청소년상담사업 */
.business_visual {background: #f9b43b url('../../images/businessInfo/bg_visual.png') center center no-repeat;}

/* 사업소개 - 청소년상담사업 - 청소년상담사업이란? */
.teenager_consult {}

.teenager_consult .btn_wrap .btn {width: auto; padding: 0 40px; height: 60px; line-height: 60px; font-size: 18px; font-weight: 500;}

.teenager_consult {padding: 45px 0 100px; font-size: 16px; color: #666; line-height: 26px;}
.teenager_consult .box .box_title {background: url('../../images/common/ic_bul_yellow.png') left top 10px no-repeat;}
.teenager_consult .text_info {margin: 0 0 40px;}
.teenager_consult>img {display: block; width: 857px; margin: 0 auto;}
.teenager_consult .circle_box {font-size: 0;}
.teenager_consult .circle_box>* {display: inline-block; vertical-align: middle;}
.teenager_consult .circle_box>img {margin: 40px 12px 0;}
.teenager_consult .circle_box p {margin-bottom: 20px; font-size: 20px; font-weight: 500; color: #333;}

.line_list {padding: 15px 20px; background: #f4f4f4;}
.line_list li {position: relative; width: 50%; padding: 0px 0 0px 15px; font-size: 16px; color: #666;}
.line_list li:before {position: absolute; left: 0; top: -2px; content: "-";}

.dot_list {}
.dot_list li {position: relative; width: 50%; padding: 0px 0 0px 15px; font-size: 16px; color: #666;}
.dot_list li strong {font-weight: 400; color: #222;}
.dot_list li:before {position: absolute; left: 0; top: 0; content: "·";}

.box_list { display: flex; flex-wrap: wrap; gap: 15px; }
.box_list>li { flex: 1; width: calc((100% - 45px) / 4); position: relative; }
.box_list>li dl { display: flex; flex-direction: column; height: 100%; }
.box_list>li dl dt { display: flex; flex-direction: column; justify-content: center; height: 60px; flex-shrink: 0; padding: 0 15px; font-size: 18px; font-weight: 500; color: #ff9d23; border-bottom: 1px solid #ddd; background: url('../../images/businessInfo/img_bar_yellow.png') left top no-repeat; line-height: 1.3;}
.box_list>li dl dt span {display: block; color: #999; font-size: 85%;}
.box_list>li dl dd {flex:1; padding: 10px 15px; background: #ebebeb;}
.box_list>li dl dd.fl_wrap ul {float: left; width: 50%;}
.box_list>li dl dd span {display: block;}
.box_list>li dl dd>ul>li {position: relative; padding: 0 0 0 7px; font-size: 14.5px; letter-spacing: -0.5px; color: #666; word-break: keep-all;}
.box_list>li dl dd>ul>li:before {position: absolute; left: 0; top: 0; bottom: 0; width: 10px; content: ""; background: url('../../images/businessInfo/ic_bul_gray.png') left top 13px no-repeat;}
.box_list>li dl dd>ul>li.bg_none {padding-left: 0;}
.box_list>li dl dd>ul>li.bg_none:before {display: none;}
.box_list.type2 { gap: 15px 30px; }
.box_list.type2 >li:after {position: absolute; right: -20px; top: 50%; margin-top: -9px; width: 10px; height: 18px; content: ""; background: url('../../images/businessInfo/ic_arrow_right_gray3.png') center center no-repeat;}
.box_list.type2 >li:last-child:after {display: none;}


.line_box {padding: 20px 10px; color: #333; font-weight: 500; border-top: 1px solid #222; border-bottom: 1px solid #ddd;}
.line_box p>* {display: inline-block;}

/* 사업소개 - 청소년상담사업 - 개인상담 */
.individual {}

.individual .btn_wrap {margin-top: 20px;}

.box_text {margin-bottom: 15px; font-size: 16px; color: #666; line-height: 26px;}

.img_list li {width: 22%; margin-right: 4%;}
.img_list li:last-child {margin-right: 0;}

.process_list>li {width: 236px; margin-right: 26px; margin-bottom: 15px;}
.process_list>li.step5 {width: 453px;}
.process_list>li:last-child {margin-right: 0;}
.process_list>li dl dt {height: 50px; padding: 0 20px; font-size: 18px; font-weight: 500; line-height: 50px; color: #fff; background: url('../../images/businessInfo/bg_process01.png') right center no-repeat; background-size: auto 100%;}
.process_list>li.step6 dl dt {background: url('../../images/businessInfo/bg_process02.png') right center no-repeat; background-size: auto 100%;}
.process_list>li dl dd {width: calc(100% - 24px); min-height: 145px; padding: 10px; border: 2px solid #f9b43b; border-top: 0;}
.process_list>li dl dd ul li {position: relative; padding: 0 0 0 8px; font-size: 14px; line-height: 20px; color: #666;}
.process_list>li dl dd ul li:before {position: absolute; left: 0; top: 1px; content: "·"; font-weight: 500;}
.process_list>li dl dd ul li span {display: block;}

/* 사업소개 - 청소년상담사업 - 사이버상담 */
.cyber_consult {}

.cyber_consult .btn_wrap {margin-top:  50px;}

.img_balloon {position: relative;}
.img_balloon:after {display: block; visibility: hidden; clear: both; content: "";}
.img_balloon .img_area {float: left; width: 530px; height: 210px; z-index: 1;}
.img_balloon .img_area img {height: 210px;}
.img_balloon .text_area {display: table; position: absolute; right: 0; top: 0; width: 519px; z-index: 2;}
.img_balloon .text_area dl {display: table-cell; position: relative; width: calc(100% - 35px); height: 210px; margin-left: 35px; padding: 10px 45px 10px 35px; background: #ebebeb; vertical-align: middle;}
.img_balloon .text_area dl:before {position: absolute; left: -21px; top:0; bottom: 0; width: 21px; height: 210px; content: ""; background: url('../../images/businessInfo/bg_graybox.png') center center no-repeat;}
.img_balloon .text_area dl dt {margin-bottom: 5px; font-size: 18px; font-weight: 500; color: #333;}
.img_balloon .text_area dl dd {position: relative; padding-left: 10px; font-size: 15px; line-height: 26px; color: #666; word-break: keep-all;}
.img_balloon .text_area dl dd:before {position: absolute; left: 0; top: 1px; content: "·"; font-weight: 500;}


.cyber_consult .box_text strong {color: #333;}
.cyber_consult .img_balloon {height: auto;}
.cyber_consult .img_balloon:after {display: none;}
.cyber_consult .img_balloon .text_area {position: static; width: 100%;}
.cyber_consult .img_balloon .text_area dl {display: table; table-layout: fixed; height: auto; margin: 0; padding: 0; background: none;}
.cyber_consult .img_balloon .text_area dl:after {display: block; visibility: hidden; clear: both; content: "";}
.cyber_consult .img_balloon .text_area dl:before {display: none;}
.cyber_consult .img_balloon .text_area dl dt {display: table-cell; width: 90px; text-align: center; vertical-align: middle; color: #fff; font-size: 15px; font-weight: 500; background: #999;}
.cyber_consult .img_balloon .text_area dl dd {display: table-cell; width: 100%; padding: 15px; background: #f4f4f4;}
.cyber_consult .img_balloon .text_area dl dd:before {display: none;}
.cyber_consult .img_balloon .text_area dl dd p {position: relative; padding-left: 15px;}
.cyber_consult .img_balloon .text_area dl dd p:before {position: absolute; left: 0; top: 0; content: "·"; font-weight: 500;}

/* 사업소개 - 청소년상담사업 - 전화상담 */
.telephone {}

.telephone .box .mobile_none {display: block;}
.telephone .box .box_img img {margin: 0 auto;}

.telephone .box .img_balloon .text_area {position: static; width: 100%;}
.telephone .box .img_balloon .text_area dl:before {display: none;}

.telephone img.mt20 {max-width: 100%;}

.box_info_list li {font-size: 15px; line-height: 24px; color: #666;}

/* 사업소개 - 청소년상담사업 - 학교폭력예방사업 */
.school {padding: 30px 0 150px;}

.school .box_title + p {padding: 15px; font-size: 16px; color: #666; line-height: 24px; letter-spacing: 0; word-break: keep-all; background: #f4f4f4;}

/* 사업소개 - 청소년상담사업 - 지역연계특화사업 */
.local_link {}
.local_link .box .box_text span {display: block;}

.box_cont_title {font-size: 17px; font-weight: 500; color: #222; margin-bottom: 10px;}

/* 사업소개 - CYS-Net */
.cysnet {padding: 45px 0 100px;}

.cysnet .box .box_title {background: url('../../images/common/ic_bul_yellow.png') left top 12px no-repeat;}
.cysnet .box .box_text {letter-spacing: -1px;}
.cysnet .box .box_text strong {letter-spacing: 0;}

/* 사업소개 - CYS-Net - CYS-Net이란? */
.cysnet .box .box_cont>img {display: block; margin: 0 auto 20px;}
.cysnet .img_balloon .img_area {width: 390px;}
.cysnet .img_balloon .text_area {width: 680px;}

/* 사업소개 - CYS-Net - 미추홀구청소년통합지원체계 */
.integrated {}

.integrated .box_text .mobile_none {display: block;}
.integrated .img_balloon .img_area {width: 530px;}
.integrated .img_balloon .text_area {width: 530px;}

/* 사업소개 - CYS-Net - 1388청소년지원단 */
.youth {}

.youth .box_text .mobile_none {display: block;}

.youth .tree {margin-top: 30px;}
.youth .tree p {position: relative; width: 218px; height: 51px; margin: 0 auto; line-height: 51px; font-size: 18px; font-weight: 500; color: #fff; text-align: center; background: #f9b43b;}
.youth .tree p:after {position: absolute; left: 50%; bottom: -35px; width: 1px; height: 35px; margin-left: -0.5px; background: #ddd; content: "";}
.youth .tree ul {position: relative; margin-top: 35px; padding-top: 45px;}
.youth .tree ul:before {position: absolute; left: 50%; top: 0; width: 805px; height: 1px; margin-left: -402.5px; background: #ddd; content: "";}
.youth .tree ul li {position: relative; width: 218px; height: 51px; margin-right: 50px; line-height: 51px; font-size: 18px; font-weight: 500; color: #fff; text-align: center; background: #42bcdc;}
.youth .tree ul li:after {position: absolute; left: 50%; top: -45px; width: 1px; height: 45px; margin-left: -0.5px; background: #ddd; content: "";}
.youth .tree ul li:last-child {margin-right: 0;}

.youth .line_list li {width: 100%;}

.activity_list li {position: relative; width: 137px; margin-left: 35px;}
.activity_list li:first-child {margin-left: 0;}
.activity_list li:before {position: absolute; left: -25px; top: 50px; width: 16px; height: 25px; content: ""; background: url('../../images/businessInfo/ic_arrow_right_gray.png') center center no-repeat;}
.activity_list li:first-child:before {display: none;}
.activity_list li dl dt {width: 100%; height: 32px; margin: 10px 0 2px; line-height: 32px; font-size: 13px; font-weight: 500; color: #fff; background: #f9b43b; border-radius: 50px;}
.activity_list li dl dd {padding: 0 15px; line-height: 16px; font-size: 13px; font-weight: 500; word-break: keep-all;}

.guideline li {float: left; width: 32%; height: 535px; margin-right: 2%; padding: 25px 30px; background: #eee;}
.guideline li:last-child {margin-right: 0;}
.guideline li dl dt {width: 100%; height: 37px; margin: 15px auto 0; line-height: 37px; color: #fff; font-size: 15px; font-weight: 500; background: #f9b43b; border-radius: 50px;}
.guideline li dl dd>p {display: block; height: 60px; margin-bottom: 5px; padding-bottom: 10px; font-size: 15px; line-height: 20px; color: #434343; border-bottom: 1px solid #ddd;}
.guideline li dl dd span.mobile_none {display: block;}
.guideline li dl dd div {margin-top: 15px; font-size: 14px; line-height: 20px; font-weight: 400; color: #7d7d7d;}
.guideline li dl dd div p {padding: 2px 0;}

.youth .guideline li dl dd {display: table; width: 100%;}
.youth .guideline li dl dd>p {display: table-cell; width: 100%; vertical-align: middle; padding: 0; font-size: 14px; letter-spacing: -1.5px;}
.youth .guideline li dl dd>p span {font-weight: 500; color: #333;}
.youth .guideline li dl dd div {display: table-row;}
.youth .guideline li dl dd div>*:first-child {margin-top: 15px;}

.youth .box .box_cont table {width: 100%; table-layout: fixed; border-top: 1px solid #3f9ab2;}
.youth .box .box_cont table th {height: 50px; font-size: 16px; font-weight: 500; color: #008ba1; border-bottom: 1px solid #ddd;}
.youth .box .box_cont table td {height: 38px; padding: 5px; font-size: 14px; line-height: 20px; text-align: center; color: #828282; border-bottom: 1px solid #ddd;}
.youth .box .box_cont table td.text_left {padding: 5px 40px;}

/* 사업소개 - CYS-Net - 찾아가는 거리상담 */
.street {}

.street dl {margin-top: 10px; padding: 20px; background: #eee;}
.street dl dt {display: inline-block; position: relative; width: 230px; height: 37px; line-height: 37px; font-size: 18px; font-weight: 500; color: #fff; text-align: center; background: #f9b43b; border-radius: 50px;}
.street dl dd {margin-top: 15px; font-size: 16px; color: #666; line-height: 26px;} 
.street dl dd span.mobile_none {display: block;}

/* 사업소개 - CYS-Net - 교육사업 */
.education_business {padding: 30px 0 150px;}

.education_business .guideline li {height: 400px;}
.education_business .guideline li dl dd {margin-top: 15px; font-size: 15px; line-height: 22px; color: #666;}

/* 사업소개 - CYS-Net - 또래상담사업 */
.peer {}

.peer .color_box li {width: 100%; margin-bottom: 20px; padding: 10px 25px; background: #eee;}
.peer .color_box li:after {display: block; visibility: hidden; clear: both; content: "";}
.peer .color_box li>* {float: left;}
.peer .color_box li dl {width: calc(100% - 170px); margin-left: 30px; margin-top: 20px;}
.peer .color_box li dl dt {width: 270px; height: 37px; margin: 0; line-height: 37px; text-align: center; color: #fff; font-size: 15px; font-weight: 500; background: #f9b43b; border-radius: 50px;}
.peer .color_box li dl dd {width: 70%; margin-top: 15px; font-size: 16px; line-height: 24px; color: #666;}

/* 사업소개 - 청소년동반자 */
.teenager_companion {padding: 45px 0 100px;}

.teenager_companion .btn_wrap .btn {width: auto; padding: 0 40px; height: 60px; line-height: 60px; font-size: 18px; font-weight: 500;}

.teenager_companion .box .box_title {background: url('../../images/common/ic_bul_yellow.png') left top 10px no-repeat;}
.teenager_companion .box .box_cont table {width: 100%; table-layout: fixed; border-top: 1px solid #ddd}
.teenager_companion .box .box_cont table th {position: relative; height: 50px; padding-left: 20px; font-size: 16px; color: #222; border-bottom: 1px solid #ddd; background: #eee;}
.teenager_companion .box .box_cont table th:after {position: absolute; left: 0; bottom: 0; content: ""; width: 22px; height: 2px; background: #f9b43b;}
.teenager_companion .box .box_cont table td {height: 38px; padding: 5px; font-size: 14px; line-height: 20px; text-align: center; color: #828282; border-bottom: 1px solid #ddd;}
.teenager_companion .box .box_cont table td.text_left {padding: 5px 20px;}

.teenager_companion .line_list li {width: 42%; letter-spacing: -0.5px;}
.teenager_companion .line_list li:nth-child(1),
.teenager_companion .line_list li:nth-child(4),
.teenager_companion .line_list li:nth-child(7) {width: 33%;}
.teenager_companion .line_list li:nth-child(3n+3) {width: 25%;}

.teenager_companion .btn_wrap {margin-top: 40px;}

/* 사업소개 - 학교밖청소년지원센터 꿈드림 */
.dream {padding: 45px 0 100px;}

.dream .box .box_title {background: url('../../images/common/ic_bul_yellow.png') left top 10px no-repeat;}

.dream .btn_wrap .btn {width: auto; padding: 0 40px; height: 60px; line-height: 60px; font-size: 18px; font-weight: 500;}

/* 사업소개 - 학교밖청소년지원센터 꿈드림 - 꿈드림이란? */
.dream {}
.dream .img_balloon .img_area {width: 390px;}
.dream .img_balloon .text_area {width: 680px;}
.dream .box .mobile_none {display: block;}

/* 사업소개 - 학교밖청소년지원센터 꿈드림 - 상담지원 */
.counseling {padding: 30px 0 150px;}

.counseling .box .box_cont ul {margin-top: 30px;}
.counseling .box .box_cont ul li {position: relative; float: left; width: 210px; height: 310px; margin-left: 60px; font-size: 18px; font-weight: 500; vertical-align: top; background: #eee;}
.counseling .box .box_cont ul li:first-child {margin-left: 0;}
.counseling .box .box_cont ul li:before {position: absolute; left: -35px; top: 50%; width: 18px; height: 35px; margin-top: -17.5px; background: url('../../images/businessInfo/ic_arrow_right_gray2.png') center center no-repeat; content: "";}
.counseling .box .box_cont ul li:first-child:before {display: none;}
.counseling .box .box_cont ul li>img {margin: 55px 0 45px;}
.counseling .box .box_cont ul li:last-child {background: none;}
.counseling .box .box_cont ul li:last-child:before {display: none;}
.counseling .box .box_cont ul li div {position: relative; width: 430px; height: 140px; margin-bottom: 30px; padding: 15px 0 15px 55px; text-align: left; background: #eee;}
.counseling .box .box_cont ul li div:before {position: absolute; left: -35px; top: 50%; width: 18px; height: 35px; margin-top: -17.5px; background: url('../../images/businessInfo/ic_arrow_right_gray2.png') center center no-repeat; content: "";}
.counseling .box .box_cont ul li div>* {display: inline-block; vertical-align: middle;}
.counseling .box .box_cont ul li div img {margin-right: 10px;}

/* 사업소개 - 학교밖청소년지원센터 꿈드림 - 교육지원 */
.edu_support {}

.edu_support .guideline li {height: 565px;}
.edu_support .guideline li dl dd {width: 200px; margin: 0 auto;}
.edu_support .guideline li dl dd>p {display: block; height: auto; padding: 15px 5px;}
.edu_support .guideline li:last-child dl dd>p {margin-bottom: 0;}
.edu_support .guideline li dl dd>div>span {display: block; margin-bottom: 10px; text-decoration: underline;}

/* 사업소개 - 학교밖청소년지원센터 꿈드림 - 자립지원 */
.self {}

.self .guideline li {height: 430px;}
.self .guideline li dl dd>p {display: block; height: auto; padding: 15px 5px; color: #666;}

/* 사업소개 - 학교밖청소년지원센터 꿈드림 - 직업지원 */
.job {}

.job .box .box_cont>img {margin-top: 30px;}

/* 사업소개 - 학교밖청소년지원센터 꿈드림 - 직업지원 */
.health {}

.health .circle_line {margin: 10px 0 50px;}
.health .circle_line li {float: left; width: 32%; height: 300px; margin-right: 2%; padding: 40px 0; font-size: 24px; font-weight: 500; background: #eee;}
.health .circle_line li:last-child {margin-right: 0;}
.health .circle_line li p {margin-top: 30px;}

.health .process_list li:last-child dl dt {padding: 4px 20px; line-height: 22px;}

.health .list li {font-size: 16px; color: #666; line-height: 26px; letter-spacing: 0;}
.health .list li strong {color: #222;}

.health .btn_wrap {margin-top:  50px;}
.health .btn_wrap .btn {width: auto; padding: 0 20px;}

/* 사업소개 - 학교밖청소년지원센터 꿈드림 - 지역특화사업 */
.localization {}

.localization .box .box_cont>img {margin-top: 30px;}



/* 센터소식 - 공지사항 */
.notice_visual {background: #50b4ff url('../../images/notice/bg_visual.png') center center no-repeat;}

.notice {padding: 45px 0 100px;}
.notice .search_wrap .btn {background: #50b4ff url('../../images/common/ic_search.png') center center no-repeat;}
.notice .paging a.active {color: #50b4ff; border: 1px solid #50b4ff;}

.category span {display: inline-block !important; padding: 3px 10px; font-weight: 400; color: #fff !important; border-radius: 50px;}
.category .jade {background:  #008ba1 !important;}  /* 전체공지 */
.category .yellow {background: #fea500 !important;}  /* 꿈드림 */
.category .red {background: #fe6a5e !important;}  /* 청소년상담복지센터 */

.notice .category.subject span.mobile_block {display: none !important;}


/* 센터소식 - 행사안내 */
.event_info {min-height: 600px; padding: 45px 0 100px;}

.event_info .search_wrap .btn {background: #50b4ff url('../../images/common/ic_search.png') center center no-repeat;}
.event_info .paging a.active {color: #50b4ff; border: 1px solid #50b4ff;}

.change_date {position: relative; width: 300px; margin: 30px auto;}
.change_date .date {font-size: 30px; font-weight: 500; color: #666;}
.change_date input.btn {position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border: 0 !important;}
.change_date .btn_prev {left: 0;background: url('../../images/notice/ic_arrow_left_gray.png.png') center center no-repeat;}
.change_date .btn_next {right: 0; background: url('../../images/notice/ic_arrow_right_gray.png') center center no-repeat;}

.schedule table {width: 100%; table-layout: fixed;}
.schedule table thead td {color: #fff; font-size: 18px; border: 0;}
.schedule table thead td.bg_jade {background: #008ba1;}
.schedule table thead td.bg_yellow {background: #f9b43b;}
.schedule table td {height: 50px; padding: 5px; font-size: 16px; line-height: 20px; text-align: center; color: #333; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; background: #f6f6f6;}
.schedule table td:last-child {border-right: 0;}
.schedule table td.date {font-size: 18px; font-weight: 500; background: #eee;}
.schedule table td.jade {color: #008ba1; background: #fff;}
.schedule table td.yellow {color: #f9b43b; background: #fff;}
.schedule table td a:hover { text-decoration: underline; }

.thismonth {display: table; width: 100%;}
.thismonth .yearmonth {color: #fff; background: #1996aa;}
.thismonth .yearmonth dt:after {background: #fff;}
.thismonth .date {padding: 10px 20px 20px 20px; background: #f1f3f6;}

.month_list>li {display: table; width: 100%; margin-top: 60px}
.month_list>li .yearmonth {color: #555; background: #fff; border-top: 2px solid #555;}
.month_list>li .yearmonth dt:after {background: #555;}
.month_list>li .date {padding: 0 20px 20px 20px; background: #fff; vertical-align: top;}
.month_list>li .date li:first-child dl {border-top: 1px solid #ddd;}

#viewPop {position: fixed; left: 50%; top: 50%; width: 300px; margin-top: -70px; margin-left: -100px;}
#viewPop .popup_inner {width: 300px; margin: 0 auto; padding: 20px;}
#viewPop .popup_contents dl {margin: 5px 0; font-size: 0; text-align: left;}
#viewPop .popup_contents dl dt {display: inline-block; width: 50px; font-size: 16px; font-weight: 500; color: #666;}
#viewPop .popup_contents dl dd {display: inline-block; width: calc(100% -70px); font-size: 16px;}

/* 센터소식 - 행사소식 */
.event {padding: 45px 0 100px;}

.event .search_wrap .btn {background: #50b4ff url('../../images/common/ic_search.png') center center no-repeat;}
.event .paging a.active {color: #50b4ff; border: 1px solid #50b4ff;}

.galley_list ul li {width: 24%; margin-right: 1.33%; margin-bottom: 30px;}
.galley_list ul li:nth-child(4n+4) {margin-right: 0;}
.galley_list ul li a {display: block;}
.galley_list ul li a .text_wrap dt {margin-top: 5px; font-size: 16px; font-weight: 500; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.galley_list ul li a .text_wrap dd {min-height: 20px; margin: 5px 0; font-size: 14px; color: #666; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.galley_list ul li a .text_wrap dd.date {margin: 0; color: #999;}

/* 센터소식 - 보도자료 */
.report {padding: 45px 0 100px;}

.report .search_wrap .btn {background: #50b4ff url('../../images/common/ic_search.png') center center no-repeat;}
.report .paging a.active {color: #50b4ff; border: 1px solid #50b4ff;}


/* 개인정보취급방침 / 이용약관 */
.other_visual {background: #bbb;}

.privacy,
.terms {padding: 45px 0 100px;}

.privacy,
.terms {font-size: 13px; line-height: 20px; color: #666;}
.privacy b,
.terms b {display: block; margin-bottom: 5px; font-size: 14px;}
.privacy table,
.terms table {width: 100%; margin-top: 10px; border: 1px solid #ddd;}
.privacy table th,
.terms table th {padding: 5px 10px; font-weight: 500; background: #f2f2f2; border: 1px solid #ddd;}
.privacy table td,
.terms table td {padding: 5px 10px; border: 1px solid #ddd;}


.cm_guide { position: relative; padding-left: 20px; font-size: 13px; margin-top: 5px; }
.cm_guide:before { display: block; content:"!"; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background-color: #fe6a5e; color: #fff; text-align: center; line-height: 16px; border-radius:100%; font-size: 10px; }

/* 카테고리 */
[class*=cm_state] { display: inline-flex; border: 1px solid transparent; align-items: center; justify-content: center; text-align: center; vertical-align: middle; line-height: 1.3; }
.cm_state1 { font-size: 14px; padding: 3px 10px; border-radius: 50px; font-weight: 400; color: #fff; }
.cm_state1.state1 { background-color: #fe6a5e; }
.cm_state1.state2 { background-color: #fea500; }
.cm_state1.state3 { background-color: #008ba1; }

/* 오버뷰 */
.cm_overview1 { width: 600px; margin: 10px auto; margin-top: 5px; }
.cm_overview1 .ovw1_list { display: flex; justify-content: center; margin: -5px; }
.cm_overview1 .ovw1_list > li { width: 50%; padding: 5px; }
.cm_overview1 .ovw1_box { display: flex; flex-direction: column; justify-content: space-between; border-radius:15px; padding: 10px 15px; height: 100%; }
.cm_overview1 .ovw1_title { font-size: 16px; color: #444; }
.cm_overview1 .ovw1_desc { font-size: 20px; font-weight: bold; }
.cm_overview1 .ovw1_desc span { position: relative; display: inline-block; padding-left: 25px; }
.cm_overview1 .ovw1_desc span:before { content:""; display: block; width: 17px; height: 17px; position: absolute; left: 0; top: 50%; margin-top: -8.5px; }
.cm_overview1 .ovw1_list > li.list1 .ovw1_box { border:1px solid #b362bb; }
.cm_overview1 .ovw1_list > li.list2 .ovw1_box { border:1px solid #0077c3; }
.cm_overview1 .ovw1_list > li.list1 .ovw1_desc { color: #9424a0; }
.cm_overview1 .ovw1_list > li.list2 .ovw1_desc { color: #0076c3; }
.cm_overview1 .ovw1_list > li.list1 span:before { background-image: url(../../images/common/icon_tel.png); }
.cm_overview1 .ovw1_list > li.list2 span:before { background-image: url(../../images/common/icon_tel2.png); }

/* 메인 */
.main_visual { position: relative; overflow: hidden; }
.main_visual .main_visual_img { position: relative; }
.main_visual .main_visual_img:before { content:""; display: block; padding-top: 31.529%; }
.main_visual .main_visual_img img { position: absolute; left: 0 ; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; }
.main_visual .link_btn { position: absolute; bottom: 40px; z-index: 1; display: block; max-width: 31.266%; }
.main_visual .link_btn.btn1 { left: 7.042%; }
.main_visual .link_btn.btn2 { right: 7.042%; }
.main_visual .link_btn img { max-width: 100%; }
.main_visual .link_btn:hover img { animation: tada 1s; }


@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.cm_tab1 { margin-bottom: 35px; }
.cm_tab1 .tab_list { display: flex; align-items: center; gap: 10px 50px; }
.cm_tab1 .tab_list > li { font-size: 18px; }
.cm_tab1 .tab_list > li > a { display: inline-block; }
.cm_tab1 .tab_list > li > a span { position: relative; display: inline-block; padding-bottom: 10px; }
.cm_tab1 .tab_list > li > a span:before { content:""; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.cm_tab1 .tab_list > li.active { font-weight: bold; }
.cm_tab1 .tab_list > li.active > a span:before { background-color: #50b4ff; }

.cm_tab2 {  }
.cm_tab2 .tab_list { display: flex; flex-wrap: wrap; gap: 10px; }
.cm_tab2 .tab_list > li {  }
.cm_tab2 .tab_list > li > a { display: flex; align-items: center; justify-content: center; min-height: 40px; min-width: 156px; height: 100%; padding: 3px 15px; font-size: 14px; text-align: center; color: #fff; background: #fe6a5e; border: 1px solid #fe6a5e; line-height: 1.2; }
.cm_tab2 .tab_list > li > a span {  }
.cm_tab2 .tab_list > li > a span:before {  }
.cm_tab2 .tab_list > li.active {  }
.cm_tab2 .tab_list > li.active > a span:before {  }