@charset "utf-8";

/* 인사말 */
.greeting {position:relative;}
.greeting .greeting-img {position:relative;}
.greeting .greeting-img img {max-width:100%;height:auto;}
.greeting .greeting-cont {margin-top:2.5rem}
.greeting .greeting-cont .txt1 {font-size:0.9rem;color:#1c1c1c;line-height:1.5;}
.greeting-step {margin-top:2.5rem}
.greeting-step > .step {display:table;width:100%;margin-bottom:1.5rem}
.greeting-step > .step:last-child {margin-bottom:0}
.greeting-step > .step .step-num {display:table-cell;width:4rem;vertical-align:top;}
.greeting-step > .step .step-num .cr {
    display:block;
    position:relative;
    width:4rem;
    height:4rem;
    border-radius:100%;
    background-color:#e7a50a;
}
.greeting-step > .step .step-num .cr .num {
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    text-align:center;
    font-size:0.9rem;
    color:#fff;
    font-weight:500;
    line-height:1;
    transform:translate(-50%, -50%);
}
.greeting-step > .step .step-txt {display:table-cell;vertical-align:middle;padding-left:0.55rem;font-size:0.9rem;color:#010101;line-height:1.5;}

/* 센터가 하는일 */
.center-info {position:relative;}
.center-info .info-tit {font-size:2rem;color:#424242;font-weight:400;line-height:1.2;}
.center-info .txt {margin-top:1.75rem;color:#767676;font-weight:400;line-height:1.3;font-size:0.9rem}
.center-info .img {float:left;width:42%;position:relative;}
.center-info .img img {max-width:100%;height:auto;}
.center-info .cont {float:left;width:58%;position:relative;padding-left:1rem}
@media screen and (max-width:600px){
    .center-info .img {float:none;width:100%;}
    .center-info .cont {float:none;width:100%;padding-left:0;margin-top:2rem}
	.center-info .info-tit {font-size:1.5rem;color:#424242;font-weight:400;line-height:1.2;}
}

/* 연혁 */
.history {position:relative;}
.history .year {font-size:2rem;color:#cf2953;line-height:1;font-weight:300;}
.history .month {font-size:1rem;color:#5c5c5c;line-height:1.3;font-weight:300;}
.history .month-txt {font-size:0.95rem;color:#5c5c5c;line-height:1.3;font-weight:300;}
.history > .history-list {margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #ddd}
.history > .history-list:last-child {border-bottom-width:0;margin-bottom:0;padding-bottom:0;}
.history > .history-list .year {float:left;position:relative;}
.history > .history-list .ymm-cont {position:relative;float:right;width:calc(100% - 6.5rem);padding-top:0.7rem}
.history > .history-list .ymm-cont ul {position:relative;padding-left:1rem;margin-bottom:0.8rem}
.history > .history-list .ymm-cont ul li {position:relative}
.history > .history-list .ymm-cont ul::after {
    content:"";
    display:block;
    position:absolute;
    top:0.3rem;
    left:0;
    width:0.7rem;
    height:0.7rem;
    background:url(../imgs/info/history_dot.png) no-repeat 0 0;
    background-size:100% auto;
}
.history > .history-list .ymm-cont ul:last-child {margin-bottom:0}
.history > .history-list .ymm-cont ul li .month {float:left;position:relative;}
.history > .history-list .ymm-cont ul li .month-txt {float:right;position:relative;width: calc(100% - 4.2rem);} 
@media screen and (max-width:720px){
    .history > .history-list .ymm-cont ul li .month-txt {width:calc(100% - 3rem)}
}
@media screen and (max-width:500px){
    .history .year {font-size:1.8rem}
    .history > .history-list .year {float:none;}
    .history > .history-list .ymm-cont {float:none;width:100%;padding-top:0.8rem}
}

/* 조직도 */
.organization {position:relative;text-align:center;}
.organizatio .w100 {width:5rem}
.organizatio .w200 {width:10rem}
.organization img {max-width:100%;height:auto;}

.left {text-align:left;}
.center {text-align:center;}


@media screen and (max-width:606px){
    .organization .table-box {overflow-x:auto;}
    .organization .table-box .tbl-type1 {min-width:610px;}
}

/* 시설안내 */
.facility-info {position:relative;width:100%;overflow:hidden;}
.facility-info .row {position:relative;margin:-0.5rem}
.facility-info .row .img,
.facility-info .row .cont {float:left;position:relative;width:50%;padding:0.5rem}
.facility-info .row .img img {max-width:100%;height:auto}
.facility-info .row .cont .facility-list {position:relative;}
.facility-info .row .cont .facility-list li {margin-bottom:1rem}
.facility-info .row .cont .facility-list li:last-child {margin-bottom:0}
.facility-info .row .cont .facility-list .sub-txt {float:right;position:relative;width:calc(100% - 7rem);}
.facility-info .row .cont .facility-list .sub-title2 {float:left;position:relative;}
.facility-info .w200 {width:10rem}
@media screen and (max-width:600px){
    .facility-info .row .img,
    .facility-info .row .cont {width:100%;}
    .facility-info .row .cont {margin-top:0.7rem}
    .facility-info .row .cont .facility-list li {margin-bottom:2rem}
    .facility-info .table-box {overflow-x:auto;}
    .facility-info .tbl-type1 {min-width:650px}
    .facility-info .w200 {width:7rem}
}

/* ci */
.ci {position:relative;}
.ci .ci-mark {position:relative;display:table;width:100%;}
.ci .ci-mark .img {display:table-cell;width:12.8rem}
.ci .ci-mark .img img {max-width:100%;height:auto;}
.ci .ci-mark .cont {display:table-cell;vertical-align:top;position:relative;width:calc(100% - 12.8rem);padding-left:1.7rem}
.ci .ci-mark .sub-txt {margin-top:0.5rem;font-weight:300;}
.ci .ci-img {width:100%;overflow:hidden;margin-top:1.5rem}
.ci .ci-img .sub-txt {margin-top:0.5rem;font-weight:300;}
.ci .mt50 {margin-top:2.5rem}
.ci .ci-color {position:relative;margin-top:2.5rem;overflow:hidden;}
.ci .ci-color .ci-color-list {padding-top:1rem;margin:-0.25rem}
.ci .ci-color .ci-color-list li {float:left;position:relative;width:25%;padding:0.25rem}
.ci .ci-color .ci-color-list li .color-box {
    display:table;
    width:100%;
    height:8.9rem;
    text-align:center;
}
.ci .ci-color .ci-color-list li .color-box.bg1 {background-color:#005baa;}
.ci .ci-color .ci-color-list li .color-box.bg2 {background-color:#ee0873;}
.ci .ci-color .ci-color-list li .color-box.bg3 {background-color:#fdb810;}
.ci .ci-color .ci-color-list li .color-box.bg4 {background-color:#73c045;}
.ci .ci-color .ci-color-list li .color-box .color-box-cont {display:table-cell;width:100%;height:8.9rem;color:#fff;vertical-align:middle;padding:10px}
.ci .ci-color .ci-color-list li .color-box .color-box-cont .tit {
    display:block;
    font-size:1.1rem;
    color:#fff;
    font-weight:500;
}
.ci .ci-color .ci-color-list li .color-box .color-box-cont .txt {
    margin-top:0.5rem;
    font-size:0.8rem;
    color:#fff;
    line-height:1.2;
}

@media screen and (max-width:800px){
    .ci .ci-mark .img {width:9rem}
    .ci .ci-mark .cont {width:calc(100% - 10rem);padding-left:1rem}
}
@media screen and (max-width:600px){ 
    .ci .ci-mark {display:block;}
    .ci .ci-mark .img {display:block;width:100%;}
    .ci .ci-mark .cont {display:block;width:100%;padding-left:0;margin-top:2rem}
    .ci .ci-signature ul li {width:100%}
}
@media screen and (max-width:500px){
    .ci .ci-color .ci-color-list li {width:50%}
}

/* 찾아오시는길 */
.location {position:relative;}
.location .map {position:relative;width:100%;height:25rem;border:1px solid #ddd}
.location .map_info {font-size:0.75rem;padding:0 0.5rem;width: 250px;}
.location .map-cont {border-top:0.1rem solid #000;padding-top:2rem;}
.location .map-cont.fst {padding-bottom:2rem}
.location .map-cont .sub-title {float:left;position: relative;}
.location .map-cont .b-cont {
    float: right;
    position: relative;
    width: calc(100% - 6.5rem);
}
.location .location-top {background-color:#014099;padding:1rem 1.5rem}
.location .location-top .add {float:left;position:relative;font-size:1rem;color:#fff;line-height:1.2;}
.location .location-top .add .tit {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    padding-left:2.125rem;
}
.location .location-top .add .tit::before {
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:1.2rem;
    height:1.15rem;
    background:url(../imgs/info/ico_add.png) no-repeat 0 0;
    background-size:100% auto
}
.location .location-top .add .txt {display:inline-block;position:relative;vertical-align:middle;}
.location .location-top .tel {position:relative;float:right;padding-left:1.5rem;font-size:1rem;color:#fff;line-height:1.2;}
.location .location-top .tel::before {
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:1.25rem;
    height:1.25rem;
    background:url(../imgs/info/ico_tel.png) no-repeat 0 0;
    background-size:100% auto
} 
.location .private-car {position:relative;}
.location .private-car .private-car-info  {position:relative;width:100%;display:table;border:1px solid #ddd;border-width:1px 0;}
.location .private-car .private-car-info:first-child {margin-top:0}
.location .private-car .private-car-info {margin-top:-1px}
.location .private-car .private-car-info .title,
.location .private-car .private-car-info .info-cont,
.location .private-car .private-car-info .info-btn-box {display:table-cell;vertical-align:middle;padding:1rem}
.location .private-car .private-car-info .title {width:9.3rem;text-align:center;background-color:#f8b400;}
.location .private-car .private-car-info .title h4 {font-size:1rem;color:#fff;font-weight:500;}
.location .private-car .private-car-info .info-btn-box {width:8rem}
.location .private-car .private-car-info .info-btn-box .car-btn {
    display:inline-block;
    background-color:#515151;
    font-size:0.8rem;
    color:#fff;
    text-align:center;
    width:7.5rem;
    height:2.1rem;
    line-height:2rem;
}
@media screen and (max-width:800px){ 
    .location .private-car .private-car-info  {display:block;}
    .location .private-car .private-car-info .title,
    .location .private-car .private-car-info .info-cont,
    .location .private-car .private-car-info .info-btn-box {display:block;padding:0.8rem}
    .location .private-car .private-car-info .title {width:100%;text-align:left;}
    .location .private-car .private-car-info .title br {display:none;}
    .location .private-car .private-car-info .info-btn-box {width:100%;padding-top:0;padding-bottom:1.5rem;}
}
@media screen and (max-width:600px){ 
    .location .location-top .tel {margin-top:0.8rem}
    .location .map-cont .sub-title {float:none}
    .location .map-cont .b-cont {float:none;width:100%;margin-top:0.8rem}
}