@charset "utf-8";
/* ================================================================== */
/* Name	: main.css
/* Script : Main Layout
/* Author : Design Geulggol
/* Date	: 2017-10-10
/* ================================================================== */

/* ----------------------------- */
/* top_slide
/* ----------------------------- */
#top_slide {
    width: 100%;
    border-bottom: 3px solid #0055a7;
}
#top_slide  div {
    max-width: 1248px;
    margin: 0 auto;
}
#top_slide div section {
    position: relative;
    height: 277px;
    border-left:1px solid #c5c5c6
}
#top_slide div section:first-child {
    /* padding: 30px; */
}
#top_slide div section h1 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #0055a7;
}
#top_slide div section h1:before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: #0055a7;
    margin: 10px 0 20px;
}
#top_slide div section p {
    font-size: 1.5rem;
}
#top_slide div section p a:not(.notCss) {
    position: absolute;
    bottom:87px;
    left:auto;
    display: block;
    width: 120px;
    height: 40px;
    padding: 10px;
    border: 1px solid #fff;
    font-size: 1.4rem;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    text-align: center;
    color: #0055a7;
}
#top_slide div section a:not(.notCss) {
    position: absolute;
    bottom:30px;
    left:auto;
    display: block;
    width: 120px;
    height: 40px;
    padding: 10px;
    border: 1px solid #0055a7;
    font-size: 1.4rem;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    text-align: center;
    color: #0055a7;
}
#top_slide div section:first-child {
    border: none;
}
#top_slide div section:first-child a {
    /* margin-left:2px; */
}
#top_slide div section:nth-child(2) {
   /* background: url(/images/main/bg_top1.jpg) no-repeat right 0;
    background-size: 412px; */
}
#top_slide div section:nth-child(2) p {
    width: 45%;
}
#top_slide div section:last-child {
   /* background: url(/images/main/bg_top2.jpg) no-repeat right 0 #f4f4f5;
    background-size: 412px; */
}
.hotissueBanner > div {
    /* padding: 30px; */
    height: 277px !important;
}
.koreanurseBanner > div, .bnaBanner > div {
    padding:30px;
    height:277px !important;
}
#top_slide div section:last-child p {
    width: 55%;
}
#top_slide .bx-wrapper div {max-width:3000px !important;}

.top_slide_close {
    width: 102px;
    margin: 0 auto;
}


.main header h1 {
    text-align: center;
    font-size: 4.4rem;
    font-weight: 400;
    color: #f14a4a;
}
.main header span {
    display: block;
    margin: 15px 0;
    text-align: center;
    font-family: 'MontserratRegular';
    font-size: 1.6rem;
    letter-spacing: 1.4em;
    text-indent: 1.4em;
    text-transform: uppercase;
    color: #888c92;
}

.bnaBanner > div { height:247px;}
.bnaBanner .bnaBannerImg1 { background: url('/images/main/bnabanner_bg_top1.jpg') no-repeat right 0 #f4f4f5; background-size: cover; }
.bnaBanner .bnaBannerImg2 { background: url('/images/main/bnabanner_bg_top2.jpg') no-repeat right 0 #f4f4f5; background-size: cover; }
.bnaBanner .bnaBannerImg3 { background: url('/images/main/bnabanner_bg_top3.jpg') no-repeat right 0 #f4f4f5; background-size: cover; }
    .bnaBanner .bnaBannerImg3 h1,
    .bnaBanner .bnaBannerImg3 p,
    .bnaBanner .bnaBannerImg3 a {
        color:#fff !important;
    }

    .bnaBanner .bnaBannerImg3 h1:before {
        background:#fff !important;
    }
    .bnaBanner .bnaBannerImg3 a {
        border-color:#fff !important;
    }
.bnaBanner .bnaBannerImg4 { background: url('/images/main/bnabanner_bg_top4.jpg') no-repeat right 0 #f4f4f5; background-size: cover; }
    .bnaBanner .bnaBannerImg4 p {
        width:100% !important;
    }
.bnaBanner .bnaBannerImg5 { background: url('/images/main/bnabanner_bg_top5.jpg') no-repeat right 0 #f4f4f5; background-size: cover; }
.bnaBanner .bnaBannerImg6 { background: url('/images/main/bnabanner_bg_top6.jpg') no-repeat right 0 #f4f4f5; background-size: cover; }
.bnaBanner .bnaBannerImg7 { background: url('/images/main/bnabanner_bg_top7.jpg') no-repeat right 0 #f4f4f5; background-size: cover; }
.bnaBanner .bnaBannerImg8 { background: url('/images/main/bnabanner_bg_top8.jpg') no-repeat right 0 #f4f4f5; background-size: cover; }
.bnaBanner .bnaBannerImg9 { background: url('/images/main/bnabanner_bg_top9.jpg') no-repeat right 0 #f4f4f5; background-size: cover; }
.bnaBanner .bnaBannerImg10 { background: url('/images/main/bnabanner_bg_top10.jpg') no-repeat right 0 #f4f4f5; background-size: cover; }
.bnaBanner .bnaBannerImg10 h1,
    .bnaBanner .bnaBannerImg10 p,
    .bnaBanner .bnaBannerImg10 a {
        color:#fff !important;
    }

    .bnaBanner .bnaBannerImg10 h1:before {
        background:#fff !important;
    }
    .bnaBanner .bnaBannerImg10 a {
        border-color:#fff !important;
    }
.m_top_banner_title {
    color: #000;
    font-size: 17px;
    font-weight: 400;
    width:100%;
    /* 한 줄 자르기 */
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m_top_banner_content{
    /* 한 줄 자르기 */
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    line-height: 1.2;
    height: 3.6em;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

}

/* ----------------------------- */
/* 공지사항
/* ----------------------------- */
#notice {
    max-width: 1248px;
    margin: 0 auto;
    padding: 4% 0;
}
#notice ul {
    margin: 60px 0 0;
}
#notice ul li > span {
    display: block;
    margin-bottom: 20px;
    font-family: 'MontserratMedium';
    font-size: 1.8rem;
    color: #9a9a9a;
}
#notice ul li > span span:first-child {
    font-family: 'MontserratLight';
    font-size: 5.6rem;
    color: #0055a7;
}
#notice ul li a h2 {
    margin-bottom: 10px;
    font-size: 2rem;
    color: #000;
}
#notice ul li a p {
    min-height:66px;
}
#notice ul li a span {
    position: relative;
    display: block;
    margin-top: 10px;
    padding-left: 16px;
    font-family: 'MontserratRegular';
    font-size: 1.2rem;
    color: #f14a4a;
}
#notice ul li a span:before {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 5px;
    width: 2px;
    height: 12px;
    background: #f14a4a;
}
#notice ul li a span:after {
    content: '';
    display: block;
    position: absolute;
    top: 9px;
    left: 0px;
    width: 12px;
    height: 2px;
    background: #f14a4a;
}

/* ----------------------------- */
/* 교육 및 학술행사
/* ----------------------------- */
#event {
    padding: 5% 0;
    background: url(/images/main/bg_event.jpg) no-repeat center top;
    background-size: cover;
    /* background-attachment: fixed; */
}
#event header > *{
    color: #fff;
}
#event header  {
    width: 100%.;
    margin-bottom: 3%;
}
#event .ev_wrap {
    max-width: 1248px;
    margin: 0 auto;
}
#event .ev_box {
    position: relative;
    background-color: #fff;
}
#event .ev_box h2 {
    text-align: center;
    font-size: 2rem;
    margin: 15px 0;
}
#event .ev_box h2:before {
    content: '';
    display: block;
    width: 12px;
    height: 14px;
    margin: 0 auto 15px;
    -webkit-transform:skew(-40deg);
    transform:skew(-40deg);
}
#event .ev_box button {
    position: absolute;
    bottom: -30px;
    left: 50%;
    width: 180px;
    height: 60px;
    margin-left: -90px;
    z-index: 1;
}
#event .ev_app {
    margin-top: 3em;
    background: url(/images/main/bg_ev_app.jpg) 0 0;
}
#event .ev_app h2 {
    width: 50%;
    padding: 1.2em 0 0 2em;
    float: left;
    font-size: 3rem;
    color: #fff;
    text-align: left;
}
#event .ev_app h2:before {
    display: none;
}

#event .ev_app h2 span {
    display: block;
    font-family: 'MontserratLight';
    font-size: 1.4rem;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}
#event .ev_app .img {
    width: 43%;
    height: 0;
    float: right;
    margin-right: 4.3%;
    padding-bottom: 14%;
    background: url(/images/main/ev_app03.png) no-repeat center;
    background-size: 100%;
}
#event .ev_app button {
    position: absolute;
    bottom: 24%;
    left: 54%;
    font-size: 1.4rem;
    letter-spacing: 1.2em;
    text-indent: 1.2em;
    background: #fff;
    color: #e60000;
}
#event .ed_scd,
#event .ev_info {
    padding: 10px;
}
#event .ed_scd h2,
#event .ev_info h2 {
    margin-top: 30px;
}
#event .ed_scd h2:before,
#event .ev_info h2:before {
    background: #f14a4a
}
#event .ed_scd ul,
#event .ev_info ul {
    margin: 20px 20px 53px;
    min-height:96px;
}
#event .ed_scd ul li,
#event .ev_info ul li {
    padding: 5px 0;
}
#event .ed_scd li span,
#event .ev_info li span {
    font-size: 1.4rem;
    color: #3861b4;
}
#event .ed_scd li > a,
#event .ev_info li > a {
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    width: 65%;
    float: right;
}
#event .ed_scd button,
#event .ev_info button {
    font-size: 1.4rem;
    letter-spacing: 1.2em;
    text-indent: 1.2em;
    background: #f14a4a;
    color: #fff;
}

/* ----------------------------- */
/* 사진으로 보는 부산간호사회
/* ----------------------------- */

#photo_bna {
    /* overflow: hidden; */
    padding: 5% 0 0;
    background: #efefef;
}
#photo_bna .inner {
    position: relative;
    margin-top: 300px;
    padding-bottom: 35%;/*50%;*/
    height: 773px;/*680px;*/
    background: url(/images/main/bg_photo.jpg);
}
#photo_bna  .inner > div {
    position: absolute;
    top: -255px;
    left: 50%;
    /* max-width: 61.875%; */
    max-width: 1188px;
    /* margin-left: -30.9375%; */
    margin-left: -594px;
}
#photo_bna  .inner section > h2 {
    margin-bottom: 10px;;
    font-size: 2.4rem;
    text-align: center;
    color: #000;
}
#photo_bna  .inner section > h2:before {
    content: '';
    display: block;
    width: 12px;
    height: 14px;
    margin: 0 auto 15px;
    -webkit-transform:skew(-40deg);
    transform:skew(-40deg);
    background: #f14a4a;
}
#photo_bna .photo_wrap > li > a,
#photo_bna .photo_wrap > li > a > span {
    display: block;
}
.action_gallery > li > a > span:first-child {
    overflow:hidden;
    height:198px;
}
#photo_bna .photo_wrap > li > a > span:nth-child(2) {
    margin: 25px 0 3px;
    font-size: 1.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    width: 100%;
}
#photo_bna .photo_wrap > li > a > span:nth-child(3) {
    font-size: 1.4rem;
    color: #888;
}
#photo_bna .photo_wrap > li > a > span:nth-child(4) {
    margin-top: 20px;
}
#photo_bna .bna_photo li {
    position: relative;
    padding: 30px;
    background: #fff;
    box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.3);
}
#photo_bna .bna_photo li:after {
    content: '';
    position: absolute;
    top: 169px;
    right: 0;
    width: 41px;
    height: 41px;
    background: #f14a4a;
}
#photo_bna .bna_photo li a:before,
#photo_bna .bna_photo li a:after {
    content: '';
    display: block;
    position: absolute;
    background: #fff;
    z-index: 1;
}
#photo_bna .bna_photo li a:before {
    top: 180px;
    right: 20px;
    width: 1px;
    height: 19px;
}
#photo_bna .bna_photo li a:after {
    top: 189px;
    right: 11px;
    width: 19px;
    height: 1px;
}

#photo_bna  .inner section {
    position: relative;
}
#photo_bna .inner .manpower {
    margin: 5% 0;
}
#photo_bna .inner .manpower > h2 {
    color: #fff;
}
#photo_bna .inner .manpower a > * {
    color: #fff !important;
}
#photo_bna .inner .manpower a span:first-child {
    border: 2px solid #fff;
}


#photo_bna .more {
    display: block;
    position: absolute;
    top: 25px;
    right: 33%;
    width: 30px;
    height: 30px;
}
#photo_bna .more:before ,
#photo_bna .more:after {
    content: '';
    display: block;
    position: absolute;
    background: #f14a4a;
    z-index: 1;
}
#photo_bna .more:before {
    top: 4px;
    right: 13px;
    width: 2px;
    height: 20px;

}
#photo_bna .more:after {
    top: 13px;
    right: 4px;
    width: 20px;
    height: 2px;
}




/* ----------------------------- */
/* Quick link
/* ----------------------------- */
#quicklink {
    max-width: 1248px;
    margin: 0 auto;
    padding: 5% 0 3%;
    clear: both;
}
#quicklink h1 {
    font-family: 'MontserratRegular';
    font-size: 3.6rem;
    letter-spacing: 0.6em;
    text-indent: 0.6em;
    text-align: center;
    text-transform: uppercase;
    color: #f14a4a;
}
#quicklink ul {
    margin-top: 4%;
}
#quicklink ul li a {
    display: block;
    padding-top: 75px;
    background: url(/images/main/icon.png) no-repeat;
    background-position: center top;
    background-size: 60px;
    text-align: center;
}
#quicklink ul li:nth-child(2) a {
    background-position: center -149px;
}
#quicklink ul li:nth-child(3) a {
    background-position: center -298px;
}
#quicklink ul li:nth-child(4) a {
    background-position: center -445px;
}
#quicklink ul li:nth-child(5) a {
    background-position: center -592px;
}
#quicklink ul li:nth-child(6) a {
    background-position: center -739px;
}



/* ----------------------------- */
/* banner
/* ----------------------------- */
#banner {
    width: 100%;
    overflow: hidden;
    background: #f0f0f0
}
#banner  > div {
    max-width: 1248px;
    margin: 0 auto;
    padding: 30px 0;
}
#banner > div:after {
    content: '';
    display: block;
    clear: both;
}
#banner > div button,
#banner > div div {
    float: left;
}
#banner > div ul {
    padding: 15px;
}
#banner > div button {
    display: block;
    width: 5%;
    height: 75px;
    margin: 0 1.5%;
}
#banner > div button:before,
#banner > div button:after {
    content: '';
    display: block;
    width: 25px;
    height: 2px;
    background: #a9a9a9;
}
#banner > div button:first-of-type:before {
    margin: 0 0 14px 10px;
    transform: rotate(-45deg);
}
#banner > div button:first-of-type:after {
    margin: 0 0 -7px 10px;
    transform: rotate(45deg);
}
#banner > div button:last-of-type:before {
    margin: 0 0 14px 10px;
    transform: rotate(-135deg);
}
#banner > div button:last-of-type:after {
    margin: 0 0 -7px 10px;
    transform: rotate(135deg);
}

#banner div div {
    overflow: hidden;
    width: 80%;
}
#banner div ul {
    width: 1000%;
}
#banner div ul li {
    float: left;
    width: 180px;
    /*margin: 0 10px;*/
    border: 1px solid #d5d5d5;
}





/* ----------------------------- */
/* Responsive
/* -----------------------------
/* Layout Max Size : 1248px (1208px)
/* Desktop Size	: 1024px =< Screen <= 1248px
/* Tablet Size : 768px =< Screen <= 1023px
/* Mobile Size : 480px < Screen <= 767 (landscape)
/* Mobile Size : 320px < Screen < 480px (portrait)
/* ----------------------------- */

@media screen and (max-width:1208px) {
    /* 사진으로 보는 부산광역시간호사회 */
    #photo_bna .inner {
        padding-bottom: 33%;/*60%;*/
        /* height: 0; */
    }
    #photo_bna .inner > div {
        /* position: relative; */
        /* top: 0; */
        margin: 0 auto;
        left: auto;
    }
    #photo_bna .more {
        right: 25%;
    }

}


@media screen and (max-width:1100px) {
    /* ----------------------------- */
    /* 교육 및 학술행사
    /* ----------------------------- */
    #event .ev_app h2 {
        padding: 0.8em 0 0 1.5em;
    }

}
@media screen and (max-width:1024px) {

    /* 사진으로 보는 부산광역시간호사회 */
    #photo_bna .inner > div {
        top: -252px;
    }

}



@media screen and (max-width:980px) {

    .main header h1 {
        font-size: 3rem;
    }
    .main header span {
    margin: 6px 0;
    font-size: 1.rem;
    letter-spacing: 1em;
    text-indent: 1em;
    }

    #top_slide div section {
        border-left: none;
        border-top: 1px solid #c5c5c6;
    }

    /* 공지사항 */
    #notice {
        padding: 4% 20px;
    }
    #notice ul {
        margin: 30px 0 0 ;
    }
    #notice ul li {
        margin-bottom: 20px;
    }
    #notice ul li > span {
        margin-bottom: 2.4%;
        font-size: 1.5rem;
    }
    #notice ul li > span span:first-child {
        font-size: 3.8rem;
    }
    #notice ul li a span {
        margin-top: 5px;
    }

    /* 교육 및 학슐행사 안내 */
    #event {
        padding: 60px 20px;
    }
    #event header {
        margin-bottom: 30px;
    }

    /* 보수교육일정 */
    #event .ev_app {
        margin-top: 1.6025%;
    }
    #event .ev_app h2 {
        float: none;
        padding: 1.2em 0 0 0;
        width: 100%;
        text-align: center;
    }
    #event .ev_app .img {
        float: none;
        width: 70%;
        height: 0;
        padding-bottom: 70%;
        margin: 1em auto 4.2em;
        border-radius: 10em;
        -webkit-box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
        background: url(/images/main/ev_app02.jpg) no-repeat center;
        background-size: 100%;
    }
    #event .ev_app button {
        position: absolute;
        bottom: -30px;
        left: 50%;
        width: 180px;
        height: 60px;
        margin-left: -90px;
        z-index: 1;
    }
    #event .ed_scd, #event .ev_info {
        margin-bottom: 40px;
    }

    /* 사진으로 보는 부산광역시간호사회 */
    #photo_bna {
        padding: 60px 0 0;
    }
    #photo_bna .inner {
        padding: 0 20px 62%;
    }
    #photo_bna .inner section > h2 {
        font-size: 2.05rem;
    }

}



@media screen and (max-width:768px) {

    /* 교육 및 학슐행사 안내 */
    #event .ev_box button{
        width: 140px;
        margin-left: -70px;
        letter-spacing: 0.5em;
        text-indent: 0.5em;
    }

    /* 사진으로 보는 부산광역시간호사회 */
    #photo_bna .inner {
        padding: 0 20px 870px;
    }
    #photo_bna .more {
        right: 5%;
    }

}

@media screen and (max-width:767px) {

    /* 사진으로 보는 부산광역시간호사회 */
    #photo_bna .inner {
        height: auto;
        padding: 40px 20px 20px;
        margin-top: 40px;
    }
    #photo_bna .inner > div {
        position: relative;
        top:0;
    }
    #photo_bna .inner section > h2 {
        color: #fff;
    }
    #photo_bna .inner section > h2:before {
        background: #fff
    }

    #quicklink {
        padding: 40px 20px;
    }
    #quicklink h1 {
        font-size: 3rem;
        letter-spacing: 0.3em;
        text-indent: 0.3em;
    }
    #quicklink ul {
        margin-top: 30px;
    }
    #quicklink ul li {
        margin-bottom: 20px;
    }
/* ******************************************************************************************************************** */
/* 레이어팝업 */
/* ******************************************************************************************************************** */        
.popup_common									{ max-width:70%;}
.popup_common_img								{ width:100%;}
}

@media screen and (max-width:640px) {


}


@media screen and (max-width:480px) {

    #event .ev_app {
        margin-bottom: 40px;
    }


    #photo_bna .inner section > h2 {
        font-size: 2rem;
        width: 60%;
        margin: 0 auto 10px;
    }

}


@media screen and (max-width:360px) {


}