@charset "utf-8";
/****************************************/
/* Name: 사상구보건소
/* PART: CONTENTS STYLE 
/* Version: 1.1 / day: 2018-03-23
/* Author: imtec 
/****************************************/

/*
================================================================================
메인콘텐츠
================================================================================
*/
.mTopCon{position:relative;padding:65px 20px 55px;background:#afaeae url('/img/health/main/visual.jpg') no-repeat center top;}
.mTopCon::before{position:absolute;top:0;left:0;width:100%;height:100%;content:'';background:url('/img/common/main_visual_dot.png') repeat}
.mTopCon .conBox{position:relative;margin:0 auto;max-width:1215px}
.mTopCon .conBox::after{display:block;clear:both;content:''}
.mTopCon .conBox .txt{position:absolute;bottom:180px;left:0}
.mTopCon .conBox .conWrap{position:relative;float:right;width:786px}
.mTopCon .conBox .conWrap::after{display:block;clear:both;content:''}

/* 링크 */
.mConBox1{position:relative;float:left;margin-bottom:10px;width:320px;height:300px;color:#fff;background:url('/img/health/main/search_bg.jpg') no-repeat center bottom}
.mConBox1 ul::after{display:block;clear:both;content:''}
.mConBox1 ul li{float:left;width:50%;text-align:center}
.mConBox1 ul li a{display:block;padding-top:105px;height:150px;font-size:16px;color:#fff;font-weight:bold;background-color:#1FA1AD;background-repeat:no-repeat;background-position:center 25px;transition: all 0.2s;}
.mConBox1 ul li.ic1 a{background-image:url('/img/health/main/ic_link1.png');border-bottom:1px solid #89d8df}
.mConBox1 ul li.ic2 a{background-image:url('/img/health/main/ic_link2.png');border-bottom:1px solid #89d8df;border-left:1px solid #89d8df}
.mConBox1 ul li.ic3 a{background-image:url('/img/health/main/ic_link3.png')}
.mConBox1 ul li.ic4 a{background-image:url('/img/health/main/ic_link4.png');border-left:1px solid #89d8df}
.mConBox1 ul li a:hover{color:#555;background-color:#fff}

/* 팝업존 */
.mConBox2{position:relative;float:right;width:455px;height:300px}
.mConBox2 img{width:100%;height:100%}
.mConBox2 .popSlide li a:focus{outline:2px dashed #000;outline-offset: -2px;} /*접근성 포커스 크롬border:2px dotted #000;  */
.mConBox2 .control{position:absolute;top:0;right:0;}
.mConBox2 .control button{margin-left:-1px;width:29px;height:27px;text-indent:-999px;overflow:hidden;background-repeat:no-repeat;background-color:#b2aca5;background-position:center center;border:1px solid #e6e7ec;}
.mConBox2 .control .next-slide{background-image:url('/img/health/main/ic_p_next.png') }
.mConBox2 .control .prev-slide{background-image:url('/img/health/main/ic_p_before.png') }
.mConBox2 .control .stop-slide{background-image:url('/img/health/main/ic_p_stop.png') }
.mConBox2 .control .start-slide{background-image:url('/img/health/main/ic_p_play.png') }
.mConBox2 .bx-pager{position:absolute;top:5px;right:100px;font-size:13px;letter-spacing:0}

/* 공지사항 */
.mConBox3{
    position:relative;clear:both;padding:35px 35px 35px 155px;
    width:455px;background:#fff url('/img/health/main/notice_bg.png') no-repeat;
    float: left;
}
.mConBox3 h2{position:absolute;top:55px;left:0;padding-top:50px;width:155px;font-size:18px;color:#585858;text-align:center;background:url('/img/health/main/ic_notice.png') no-repeat center top}
.mConBox3 .con{position:relative;font-size:13px;height:85px;overflow:hidden;}
.mConBox3 .con .tit{display:block;margin-bottom:10px;font-size:18px;}
.mConBox3 .con .tit a{display:block;color:#333;font-weight:bold;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mConBox3 ul{margin-top:20px;padding-top:15px;border-top:1px solid #13b0bf}
.mConBox3 ul li{position:relative;margin-bottom:5px;font-size:13px;background:url('/img/health/main/ic_dot.png') no-repeat left center}
.mConBox3 ul li a{display:block;padding:0 80px 0 10px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mConBox3 ul li .data{position:absolute;top:0;right:0}
.mConBox3 .btnMore{position:absolute;top:140px;left:40px;border:1px solid #ebebea;text-align:center}
.mConBox3 .btnMore a{display:block;width:70px;height:30px;font-size:15px;color:#888;line-height:28px}

/* 전화번호 안내 */
.mConBox3_1{
    float: left; width: 320px; height: 253px;
    background: #4084db url('/img/health/main/m_con3_1_bg.jpg') right bottom no-repeat; 
    margin-left: 10px; position: relative;
}
.mConBox3_1 dl{
    width: 100%; height: 100%; position: relative;
    color: #fff;
}
.mConBox3_1 dt{
    width: 100%; height: 45px; line-height: 45px;
    background: #2971cd url('/img/health/main/ic_m_con3_1.png') 30px center no-repeat; 
    font-size: 18px; font-weight: bold;
    padding-left: 65px; margin-bottom: 10px;
}
.mConBox3_1 dd{
    padding-left: 130px; position: relative;
    line-height: 24px;
}
.mConBox3_1 dd .two_line{
    line-height: 18px; display: inline-block; margin-top: 3px;
}
.mConBox3_1 dd .tit{
    position: absolute; left: 30px; font-weight: bold;
    color: #d8e9ff; padding-left: 10px;
    background: url('/img/health/main/m_con3_1_dot.png') left center no-repeat;
}


/* 퀵링크 */
.mConBox4{position:relative;margin-top:55px;padding:0 60px;float:left;clear:both}
.mQuickSlide li{float:left;text-align:center}
.mQuickSlide li a{display:block;color:#fff;font-weight:bold;text-shadow:0 1px 1px #333;}
.mQuickSlide li span{display:block;margin:0 auto 5px;width:90px;height:90px;opacity:0.7;background-color:#000;background-repeat:no-repeat;background-position:center center;border-radius:50%;transition: all 0.2s;}
.mQuickSlide li.ic1 span{background-image:url('/img/health/main/ic_quick1.png')}
.mQuickSlide li.ic2 span{background-image:url('/img/health/main/ic_quick2.png')}
.mQuickSlide li.ic3 span{background-image:url('/img/health/main/ic_quick3.png')}
.mQuickSlide li.ic4 span{background-image:url('/img/health/main/ic_quick4.png')}
.mQuickSlide li.ic5 span{background-image:url('/img/health/main/ic_quick5.png')}
.mQuickSlide li.ic6 span{background-image:url('/img/health/main/ic_quick6.png')}
.mQuickSlide li.ic7 span{background-image:url('/img/health/main/ic_quick7.png')}
.mQuickSlide li.ic8 span{background-image:url('/img/health/main/ic_quick8.png')}
.mQuickSlide li.ic9 span{background-image:url('/img/health/main/ic_quick9.png')}
.mQuickSlide li.ic10 span{background-image:url('/img/health/main/ic_quick10.png')}
.mQuickSlide li a:hover span{background-color:#c42020;background-position:center 45%;opacity:0.9}
.mQuickSlide li a:focus {outline:2px dashed #000;outline-offset: -2px;} /*접근성*/
.mConBox4 .bx-controls{margin-top:30px;text-align:center}
.mConBox4 .bx-controls .bx-pager-item{display:inline-block;margin:0 2px;width:12px;height:12px;text-indent:-999px;overflow:hidden;background:#4f6cbf;border-radius:50%}
.mConBox4 .bx-controls .bx-pager-item a{display:block}
.mConBox4 .bx-controls .bx-pager-item .active{background:#fff}
.mConBox4 .control button{background-color:rgba(0,0,0,0.3);position:absolute;top:20%;width:60px;height:70px;text-indent:-999px;overflow:hidden;background-repeat:no-repeat;background-position:center center;}
.mConBox4 .control button:focus,.mConBox4 .control button:hover{background-color:rgba(0,0,0,0.5);}
.mConBox4 .control .prev-slide{left:0;background-image:url('/img/health/main/ic_q_before.png')}
.mConBox4 .control .next-slide{right:0;background-image:url('/img/health/main/ic_q_next.png')}

/* 전화번호안내 */
.mConBox5{background:#466f8c}
.mConBox5 dl{position:relative;margin:0 auto;padding-left:120px;max-width:1215px;color:#fff}
.mConBox5 dl dt{position:absolute;top:18px;left:20px;font-size:18px;font-weight:bold}
.mConBox5 dl dd{padding:20px 10px}
.mConBox5 dl dd ul::after{display:block;clear:both;content:''}
.mConBox5 dl dd ul li{float:left;width:25%;padding-left:30px;font-size:16px;background:url('/img/health/main/ic_time_tell.png') no-repeat left 0}
.mConBox5 dl dd ul li.ic1{background-position:0 2px}
.mConBox5 dl dd ul li.ic2{background-position:0 -48px}
.mConBox5 dl dd ul li.ic3{background-position:0 -98px}
.mConBox5 dl dd ul li.ic4{background-position:0 -148px}

/* 맞춤정보, 패밀리사이트 */
.mBottomCon{background:#fff;z-index:1;transition: all 0.5s ease;}
/* 패밀리링크/배너 */
.famBanZone{position:relative;padding:0 20px;width:100%;height:61px;background:#fff;border-top:1px solid #e5e5e5;}
.famBanZone .fzBottom{margin:0 auto;max-width:1225px}
.famBanZone .fzBottom::after{display:block;clear:both;content:''}
.famBanZone .fzBottom .famCon{float:left;width:60%}
.famBanZone .fzBottom .famCon > li{position:relative;float:left;width:33.3%;border-right:1px solid #e5e5e5;}
.famBanZone .fzBottom .famCon > li:first-child{border-left:1px solid #e5e5e5}
.famBanZone .fzBottom .famCon > li button{width:100%;height:60px;text-align:left;text-indent:30px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;background:url('/img/common/ic_view2.png') no-repeat right center}
.famBanZone .fzBottom > .famCon > li dl{position:absolute;bottom:61px;left:-1px;padding:20px;width:260px;background:#fff;border-right:1px solid #dadada;border-left:1px solid #dadada;z-index:1}
.famBanZone .fzBottom > .famCon > li dl dt{margin:-20px -21px 10px;padding:20px 0 0 20px;font-size:15px;font-weight:bold;border-top:5px solid #676d75;}
.famBanZone .fzBottom > .famCon > li dl dd.list ul::after{display:block;clear:both;content:''}
.famBanZone .fzBottom > .famCon > li dl dd.list ul li{float:left;margin:2px 0;width:50%}
.famBanZone .fzBottom > .famCon > li dl dd.list ul li a{display:block;padding:1px 5px 1px 8px;line-height:18px;background:url('/img/sasang/main/ic_dot4.png') no-repeat left 9px; font-size:13px;max-width: 109px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.famBanZone .fzBottom > .famCon > li dl dd.btnCose{position:absolute;top:0;right:-1px;width:65px;height:55px;background:url('/img/sasang/main/order_close_bg.png') no-repeat left bottom}
.famBanZone .fzBottom > .famCon > li dl dd.btnCose button{position:absolute;top:0;right:0;width:35px;height:30px;text-indent:-999px;overflow:hidden;background-image:url('/img/common/ic_close.png');background-repeat:no-repeat;background-position:center center}

.famBanZone .fzBottom .bannCon{position:relative;float:left;padding:10px 20px 0 170px;width:40%;height:60px;border-right:1px solid #e5e5e5}
.famBanZone .fzBottom .bannCon dt{position:absolute;top:18px;left:20px;color:#666e78;font-weight:bold}
.famBanZone .fzBottom .bannCon .control{position:absolute;top:18px;left:80px}
.famBanZone .fzBottom .bannerSide li a {display:inline-block} /*접근성  수정중 12 */
.famBanZone .fzBottom .bannerSide li a:focus img{outline:2px dashed #000;outline-offset: -2px; }/*접근성  수정중 12   border:2px dashed #000;*/



.icMouse{position:fixed;left:50%;bottom:20px;margin-left:-12px;width:23px;height:57px;text-indent:-999px;overflow:hidden;background-repeat:no-repeat;transition: all 0.2s;z-index:10}
.icMouse.bg1{background-image:url('/img/common/mous.png')}
.shake{animation-duration: 8s;animation-iteration-count: infinite; animation-name: shake;}
@keyframes shake {
    0%, 100% {}
    10%, 30%, 50%, 70%, 90% {transform: translateY(-5px);}
    20%, 40%, 60%, 80% {transform: translateY(5px);}
}
/*
================================================================================
반응형 콘텐츠(메인콘텐츠)
================================================================================
*/

 /* PC Device */
@media all and (min-width:980px){
    
}

 /* PC Device 1024 */
@media all and (max-width:1213px){
    
}

 /* Tablet Device */
@media all and (max-width:979px){
    .mTopCon{padding:50px 20px;background-position:20% top;background-size:170%}
    .mTopCon .conBox .txt{position:relative;bottom:0;margin-bottom:100px;text-align:right}
    .mTopCon .conBox .txt img{height:100px}
    .mTopCon .conBox .conWrap{float:none;margin:0 auto;max-width:808px;width:auto}
    
    .mConBox1{margin-right:1%;width:40%}
    .mConBox2{width:59%}
    .mConBox3{width: 59%}
    .mConBox3_1{margin-left:1%;width:40%}    
    .mConBox2 img{height:300px}
    .mConBox4{margin-top:30px;padding:0 25px}
    .mConBox4 .control button{width:20px;background-size:100%}
    
    .mConBox5 dl {padding-left:170px}
    .mConBox5 dl dt{top:25px;left:40px}
    .mConBox5 dl dd ul li{margin:5px 0;width:50%}
    
    .famBanZone .fzBottom .famCon{float:none;width:100%}
    .famBanZone .fzBottom .bannCon{display:none}
}

 /* Mobile Device */
@media all and (max-width:640px){
    .mTopCon{padding:30px 10px 20px;background-size:170%}
    .mTopCon .conBox .txt{margin-bottom:40px;padding-top:30px;text-align:right}
    .mTopCon .conBox .txt img{height:50px}
    .mConBox1{float:none;margin-right:0;width:auto;height:auto}
    .mConBox1 ul li{width:25%}
    .mConBox1 ul li.ic1 a{border-bottom:0}
    .mConBox1 ul li.ic2 a{border-bottom:0;border-right:1px solid #89d8df}
    .mConBox2{float:none;margin-bottom:10px;width:auto;height:auto}
    .mConBox2{position:relative;width:auto;height:auto}
    .mConBox2 img{height:auto}
    .mConBox3{width:100%; padding:25px 25px 20px 100px}
    .mConBox3 h2{top:30px;width:100px}
    .mConBox3 .btnMore{top:120px;left:15px}
    .mConBox3_1{
        width: 100%; margin-left: 0; margin-top: 10px;
    }
    .mConBox4{margin-top:20px;padding:0 20px}
    .mConBox4 .control button{top:40%;width:15px;height:30px;background-size:100%}
    .mConBox5 dl{padding:15px 10px}
    .mConBox5 dl dt{position:relative;top:0;left:0;margin-bottom:10px;}
    .mConBox5 dl dd{padding:0}
    .mQuickSlide li span{width:80px;height:80px}

    .famBanZone{padding:0;height:40px}
    .famBanZone .fzBottom .famCon{width:100%;}
    .famBanZone .fzBottom .bannCon{display:none}
    .famBanZone .fzBottom .famCon > li button{height:40px;font-size:13px;text-indent:10px;background-size:25px}
    .famBanZone .fzBottom .famCon > li:first-child{border-left:0}
    .famBanZone .fzBottom .famCon > li:last-child{border-right:0}
    .famBanZone .fzBottom .famCon > li dl{bottom:40px;width:240px}
    .famBanZone .fzBottom .famCon > li dl dd.btnCose button{background-size:10px}
    .famBanZone .fzBottom .famCon > li:nth-child(3) dl{left:auto;right:0}
    .famBanZone .fzBottom .famCon > li dl dd.list ul li a{font-size:13px}
}

 /* Mobile Device */
@media all and (max-width:500px){
    .mConBox1 ul li a{padding-top:70px;height:110px;font-size:13px;background-position:center 15px;background-size:50px}
    /*.mConBox1 ul li{width:50%}
    .mConBox1 ul li a{padding-top:65px;height:100px;background-position:center 15px;background-size:50px}
    .mConBox1 ul li.ic1 a{border-bottom:1px solid #89d8df}
    .mConBox1 ul li.ic2 a{border-bottom:1px solid #89d8df;border-right:0}*/
    
    .mConBox3{padding:20px}
    .mConBox3 h2{position:relative;top:0;margin-bottom:15px;padding:0 0 0 30px;background-size:25px;background-position:left center}
    .mConBox3 .con .tit{font-size:16px}
    .mConBox3 .btnMore{left:auto;top:20px;right:20px}
    .mConBox3 .btnMore a{width:50px;height:20px;line-height:18px}

    .mConBox5 dl dd ul li{font-size:12px}
}
 /* Mobile Device */
@media all and (max-width:320px){
    
}

/*
================================================================================
서브콘텐츠
================================================================================
*/

/* 보건소 소개 */
.s1_1_con:after{display:block;clear:both;content:''}
.s1_1_con .photo{float:left;margin:0 30px 20px 0;width:200px;text-align:center}
.s1_1_con .photo span{display:block;margin-top:5px}
.s1_1_con .txt1{font-size:18px}

.s1_2_tit{margin-bottom:20px;padding:15px 0 15px 107px;background:url('/img/common/his_ic.png') no-repeat 20px center}
.s1_2_tit h2{margin-bottom:8px;font-size:26px;}
.s1_2_tit h2 span{color:#2a56a9}
.s1_2_con{border-top:2px solid #5c81c6}
.s1_2_con li{position:relative;padding:20px 10px 20px 195px;border-bottom:1px solid #d8d8d8}
.s1_2_con li .year{position:absolute;top:20px;left:30px;font-size:28px;color:#0e51b8;font-weight:bold}
.s1_2_con li .date{position:absolute;top:24px;left:109px;width:65px;font-size:16px;color:#000;font-weight:bold;line-height:16px;border-right:1px solid #ddd}
.s1_2_con li:nth-child(2n+1){background:#fbfbfb}

.guideTxt.s2_2_ic{padding-left:170px;background-image:url('/img/health/sub/s2_2_ic.png')}
.guideTxt.s3_1_2_ic{padding-left:170px;background-image:url('/img/health/sub/s3_1_2_ic.png')}
.guideTxt.s3_3_ic{padding-left:170px;background-image:url('/img/health/sub/s3_3_ic.png')}
.guideTxt.s4_5_1_ic{padding-left:170px;background-image:url('/img/health/sub/s4_5_1_ic.png')}
.guideTxt.s4_7_1_ic{padding-left:170px;background-image:url('/img/health/sub/s4_7_1_ic.png')}
.guideTxt.s4_11_1_ic{padding-left:170px;background-image:url('/img/health/sub/s4_11_1_ic.png')}

.s4_3_1_1_bg{background:url('/img/health/sub/s4_3_1_1_bg.jpg') no-repeat right top}

.s4_8_1_bg{padding-right:35%;background:url('/img/health/sub/s4_8_1_bg.jpg') no-repeat right top}

.guideTxt.s5_2_ic{padding-left:170px;background-image:url('/img/health/sub/s5_2_ic.png')}


.s4_11_img3, .s4_11_img2{overflow:hidden; width:100%;}
.s4_11_img3 li{width:32.5%; margin-right:1%; float:left;}
.s4_11_img3 li:last-child{margin-right:0;}
.s4_11_img2 li{width:49%; margin-right:1%; float:left;}
.s4_11_img2 li:last-child{margin-right:0;}

/*
================================================================================
반응형 콘텐츠(서브콘텐츠)
================================================================================
*/


/* Tablet Device */
@media all and (max-width:979px){
    
}

/* Mobile Device */
@media all and (max-width:640px){
    
    .s1_1_con .photo{margin:0 20px 10px 0;width:150px}
    
    .s1_2_tit{padding-left:80px;background-position:left center}
    .s1_2_con li{padding: 15px 10px 15px 120px;}
    .s1_2_con li .year{top: 15px;left: 5px;font-size:20px}
    .s1_2_con li .date{top: 18px;left: 60px;width: 50px;}

    .s4_3_1_1_bg{background:none}

    .s4_8_1_bg{padding:0;background:none}


    .s4_11_img{width:100%; text-align:center;}
    .s4_11_img3 li, .s4_11_img2 li{width:100%; margin-right:0; float:none; margin-bottom:7px; text-align:center;}
    .s4_11_img3 li:last-child, .s4_11_img2 li:last-child{margin-bottom:0;}


}