/* 메인슬라이더 */
#idx_wrapper {
    position: relative;
}

#visual {
    width: 100%;
    min-width: 1100px;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

a {
    cursor: pointer
}

#visual #slogan {
    width: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 998;
    visibility: hidden;
    text-align: center;
    text-shadow: 0 0 5px #00000056;
}

#visual #slogan .img01 {
    visibility: hidden;
    font-size: 2em;
    font-weight: 300;
    color: #fff;
    letter-spacing: 5px;
    /* font-family: 'MBC1961M'; */
}

#visual #slogan .img02 {
    visibility: hidden;
    font-size: 4em;
    font-weight: 500;
    color: #fff;
    letter-spacing: -1px;
    font-family: 'MBC1961M';
}

#visual #slogan .img03 {
    font-size: 23px;
    font-weight: 300;
    line-height: 1.5em;
    color: #fff;
    visibility: hidden;
    margin-top: 5px;
    font-family: 'MBC1961M';
}

#visual #slogan .mt {
    visibility: hidden;
    font-size: 19px;
    color: #adadad;
    margin: 10px 0 20px 0;
}

#visual .bx-wrapper:after {
    display: block;
    content: "";
    width: 100%;
    height: 70%;
    position: absolute;
    top: 0;
    left: 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
        background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    z-index: 11;
}

#visual .sliderbx {
    z-index: 10;
    visibility: hidden
}

#visual .sliderbx li {
    height: 100vh;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

#visual .sliderbx li.mv01 {
    background-image: url(../img/main/mvisual05.png);
}

#visual .sliderbx li.mv02 {
    background-image: url(../img/main/mvisual02.png);
}

#visual .sliderbx li.mv03 {
    background-image: url(../img/main/mvisual03.png);
}

#visual .sliderbx li a {
    display: block;
    width: 100%;
    height: 100vh;
}

/*
#visual div.bx-pager {
    width: 1000px;
    position: absolute;
    bottom: 350px;
    left: 50%;
        margin-left: -70px;
    transform: translateX(-50%);
    z-index: 101;
    text-align: center;
}

#visual div.bx-pager div {
    display: inline-block;
    margin: 0 4px;
}

#visual div.bx-pager div a {
    display: block;
    width: 12px;
    height: 12px;
    background: #fff;
    text-indent: -9999px;
    border-radius: 30px;
}

#visual div.bx-pager div a.active {
    background: #00b2ed;
    width: 40px;
}

#visual div.bx-controls-direction a {
    display: block;
    width: 40px;
    height: 40px;
    border-bottom: 3px solid #FFF;
    border-left: 3px solid #FFF;
    border-radius: 0 0 0 5px;
    text-indent: -9999px;
    position: absolute;
    top: 50%;
    margin-top: -25px !important;
    z-index: 1000;
    display: none;
}
*/

/*좌우버튼동시선택*/
#visual a.bx-prev {
    transform: translateY(-50%) rotate(45deg);
    left: 30px;
}

#visual a.bx-next {
    transform: translateY(-50%) rotate(-135deg);
    right: 30px;
}

#visual div.bx-controls-auto {
    position: absolute;
    width: 40px;
    top: 30px;
    z-index: 2;
    left: 50%;
    margin-left: 470px;
}

#visual div.bx-controls-auto a {
    float: left;
    margin-right: 3px;
    width: 12px;
    height: 12px;
    border-radius: 9px;
    color: #FFF;
    text-align: center;
    line-height: 12px;
    font-size: 12px;
    text-indent: -9999px;
}

/*플레이스탑버튼동시선택*/
#visual div.bx-controls-auto a.bx-start {
    background: url(../img/common/btn_play.png) no-repeat 50% 50% #4C5365;
}

#visual div.bx-controls-auto a.bx-stop {
    background: url(../img/common/btn_stop.png) no-repeat 50% 50% #4C5365;
}


/*메인-중간컨텐츠1*/
#middle {
    width: 100%;
    min-width: 1200px;
    /*    height: 500px;*/
    margin: 0 0 100px;
}

/*
#middle:after {
    display: block;
    content: "";
    clear: both;
}
*/

#middle_in {
    width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    /*
    position: absolute;
    top: 650px;
    left: 50%;
    transform: translateX(-50%);
*/
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#middle_in > div:nth-child(5),
#middle_in > div:nth-child(6) {
    grid-column: span 2;
    height: 250px;
}

#middle_in:after {
    display: block;
    content: "";
    clear: both;
}

#middle_in .mid {
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-size: cover;
    background-position: left bottom;
    box-sizing: border-box;
    padding: 35px 35px;
    position: relative;
    visibility: hidden;
}

#middle_in .mid:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-size: cover;
    background-position: left bottom;
    opacity: 0.5;
}

#middle_in .mid a {
    z-index: 2;
    height: 100%;
    position: relative;
    display: block;
}

#middle_in .mid01 {
    background-color: #1699dc;
}

#middle_in .mid01:before {
    background-image: url(../img/main/mid01_bg.png);
}

#middle_in .mid02 {
    background-color: #0d6592;
}

#middle_in .mid02:before {
    background-image: url(../img/main/mid02_bg.png);
}

#middle_in .mid03 {
    background-color: #d3ebf8;
}

#middle_in .mid03:before {
    background-image: url(../img/main/mid03_bg.png);
}

#middle_in .mid04 {
    background-color: #f2f2f2;
}

#middle_in .mid05 {
    background-image: url(../img/main/mid05_bg.png);
    background-color: #1166c6;
}

#middle_in .mid06 {
    background-image: url(../img/main/mid06_bg.png);
    background-color: #ffffff;
}

#middle_in .mid07 {
    /*background-image:url(../img/main/mid07_bg.png);*/
    background-color: #134986;
}

#middle .mb_title {
    font-size: 2em;
    color: #fff;
    font-family: 'MBC1961M';
}

#middle .mb_title span {
    display: block;
    font-size: 13px;
    font-family: 'SUIT';
    color: rgba(250, 250, 250, 0.4);
}

#middle p {
    font-size: 14px;
    line-height: 1.6em;
    font-weight: 400;
    color: #eee;
    margin: 15px 0 20px 0;
    word-break: keep-all;
    word-wrap: break-word;
}

#middle .mb_link {
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: block;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 2em;
    color: #fff;
    transition: all 0.3s;
}

#middle .mb_link:hover {
    background: #fff;
    color: #666;
    transition: all 0.3s;
}

#middle_in .mid03 .mb_title,
#middle_in .mid04 .mb_title,
#middle_in .mid06 .mb_title {
    color: #222;
}

#middle_in .mid03 span,
#middle_in .mid04 span,
#middle_in .mid06 span {
    color: rgba(0, 0, 0, 0.3);
}

#middle_in .mid03 p,
#middle_in .mid04 p,
#middle_in .mid06 p {
    color: #777;
}

#middle_in .mid03 .mb_link,
#middle_in .mid04 .mb_link,
#middle_in .mid06 .mb_link {
    color: #333;
}

#middle_in .mid03 .mb_link:hover,
#middle_in .mid04 .mb_link:hover,
#middle_in .mid06 .mb_link:hover {
    background: #ddd;
}

/*메인-중간컨텐츠2*/
#mv_ban {
    width: 1200px;
    margin: 0 auto 50px auto;
    display: none;
}

#mv_ban:after {
    display: block;
    content: "";
    clear: both;
}

#mv_ban .mv_box {
    float: left;
    width: 340px;
    height: 250px;
    visibility: hidden;
}

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

#mv_ban .mv_box1 {}

#mv_ban .mv_box2 {
    width: 400px;
    margin: 0 50px;
}

#mv_ban .mv_box3 {
    background: url(../img/main/mv_box3_bg.jpg) no-repeat center bottom;
}

#mv_ban .mv_box3 h2 {
    font-family: 'MBC1961M';
    font-size: 2.3em;
    margin: 5px 0 20px 0;
}

#mv_ban .mv_box3 h2 strong {
    color: #09468c;
}

#mv_ban .mv_box3 p {
    font-size: 14px;
    color: #888;
}

#mv_ban .mv_box3 span:first-child {
    color: #379b0c;
}

#mv_ban .mv_box3 span:last-child {
    color: #125bb4;
}

#mv_ban .mv_box3 ul:after {
    display: block;
    content: "";
    clear: both;
}

#mv_ban .mv_box3 li {
    float: left;
    width: 44%;
    font-size: 1.2em;
    margin: 4px 20px 4px 0;
    position: relative;
}

#mv_ban .mv_box3 li a {
    color: #777;
}

#mv_ban .mv_box3 li i {
    position: absolute;
    top: 2px;
    right: 0px;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    font-size: 12px;
    color: #ccc;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
}

#mv_ban .mv_box3 li a:hover {
    color: #222;
}

#mv_ban .mv_box3 li a:hover i {
    border-color: #999;
    color: #888;
}


/* 메인추출탭 */
.tbbs {
    position: relative;
    width: 100%;
    padding-top: 30px;
}

.tbbs .tab h3 {
    width: 106px;
    height: 32px;
    line-height: 28px;
    text-align: center;
    background: #DEE3EC;
    color: #3D4353;
    border-radius: 30px;
    position: absolute;
    top: 0;
    font-size: 1.1em;
    cursor: pointer;
}

.tbbs .tab .t1 {
    left: 0;
}

.tbbs .tab .t2 {
    left: 110px;
}

.tbbs .tab .t3 {
    left: 220px;
}

.tbbs .tab .pannel {
    padding: 25px 3px 15px 3px;
    min-height: 180px;
    display: none;
}

.tbbs .tab.on .pannel {
    display: block;
}

.tbbs .tab.on h3 {
    background: #1699DC;
    color: #FFF;
}

/* 갤러리추출 */
.mgall {
    width: 425px;
    position: relative;
}

.mgall h2 {
    font-family: 'MBC1961M';
    font-size: 1.6em;
    margin-bottom: 20px;
    color: #222;
}

.mgall .more {
    position: absolute;
    right: 0;
    top: 5px;
    font-size: 0.9em;
    color: #999;
    padding-right: 25px;
    background: url(../img/common/more.jpg) right 50% no-repeat;
}

/*메인-중간배너*/
#mbanner {
    /*margin-bottom:80px;*/
    height: 300px;
    background: url(../img/main/mbanner_bg.png) center 50% no-repeat;
    text-align: center;
    visibility: hidden;
}

#mbanner .mb_text {
    /* font-family: 'MBC1961M'; */
    font-size: 2.2em;
    color: #fff;
    padding-top: 70px;
}

#mbanner .mb_text p {
    /* font-family: 'MBC1961M'; */
    font-size: 16px;
    margin-top: 10px;
}

#mbanner .mb_text a {
    display: inline-block;
    font-size: 15px;
    color: #fff;
    margin-top: 40px;
    border: 2px solid #fff;
    padding: 0 50px;
    line-height: 45px;
    transition: all 0.3s;
}

#mbanner .mb_text a:hover {
    color: #222;
    background: #fff;
    transition: all 0.3s;
}

@media (max-width:1400px) {
    #visual {
        min-width: 100%;
        height: 50vh;
    }

    #visual #slogan {
        width: 320px;
        text-align: center;
    }

    #visual #slogan .img01 {
        font-size: 1.2em;
    }

    #visual #slogan .img02 {
        font-size: 2.2em;
    }

    #visual #slogan .img03 {
        font-size: 14px;
    }

    #visual .sliderbx {}


    #visual div.bx-pager {
        bottom: 20px;
        right: unset;
        left: 50%;
        transform: translate(-50%, 0);
    }

    #visual div.bx-pager div {
        margin: 0 2px;
    }

    #visual div.bx-pager div a {
        width: 10px;
        height: 10px;
    }

    #topm,
    #visual div.bx-pager,
    #visual div.bx-controls-direction {
        display: none;
    }
    


    /*메인-중간컨텐츠1*/
    #middle {
        min-width: 100%;
        height: auto;
        margin: 0;
    }

    #middle_in {
        width: 100%;
        position: relative;
        top: auto;
        left: auto;
        margin-left: 0px;
        grid-template-columns: repeat(2, 1fr);
        transform: translateX(0);
    }

    #middle_in .mid {
        width: 100%;
        height: 175px;
        padding: 20px 20px;
        background-size: cover;
    }

    #middle_in > div:nth-child(5),
    #middle_in > div:nth-child(6) {
        height: 175px
    }

    #middle .mb_title {
        font-size: 1.3em;
    }

    #middle .mb_title span {
        font-size: 0.9em;
        display: none;
    }

    #middle p {
        /* display:none; */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 100%;
    }

    #middle .mb_link {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 1.5em;
    }



    /*메인-중간컨텐츠2*/
    #mv_ban {
        width: 90%;
        margin: 0 auto;
    }

    #mv_ban .mv_box {
        float: none;
        width: 100%;
        height: auto;
        min-height: 100px;
    }

    #mv_ban .mv_box1 {
        height: 147px;
        overflow: hidden;
    }

    #mv_ban .mv_box2 {
        width: 100%;
        margin: 20px 0 30px 0px;
        border-top: 1px dotted #ddd;
        border-bottom: 1px dotted #ddd;
        padding: 30px 0;
    }

    #mv_ban .mv_box3 {
        background-size: 100%;
        padding-bottom: 100px;
    }

    #mv_ban .mv_box3 h2 {
        font-size: 1.8em;
    }

    #mv_ban .mv_box3 p {
        font-size: 13px;
    }

    #mv_ban .mv_box3 li {
        width: calc(50% - 20px);
        font-size: 1em;
        margin: 3px 10px;
    }

    #mv_ban .mv_box3 li i {
        position: absolute;
        top: 2px;
        right: 0px;
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        font-size: 12px;
        color: #ccc;
        border-radius: 50%;
        line-height: 20px;
        text-align: center;
    }

    #mv_ban .mv_box3 li a:hover {
        color: #222;
    }

    #mv_ban .mv_box3 li a:hover i {
        border-color: #999;
        color: #888;
    }


    /* 메인추출탭 */
    .tbbs .tab h3 {
        width: 90px;
        font-size: 1em;
    }

    .tbbs .tab .t2 {
        left: 95px;
    }

    .tbbs .tab .t3 {
        left: 190px;
    }

    /* 갤러리추출 */
    .mgall {
        width: 100%;
    }

    .mgall h2 {
        font-size: 1.4em;
    }

    .mgall .more {
        position: absolute;
        right: 0;
        top: 5px;
        font-size: 0.9em;
        color: #999;
        padding-right: 25px;
        background: url(../img/common/more.jpg) right 50% no-repeat;
    }

    /*메인-중간배너*/
    #mbanner {
        /*margin-bottom:40px;*/
        height: 180px;
        background-size: cover;
    }

    #mbanner .mb_text {
        font-size: 1.5em;
        padding: 32px 20px;
    }

    #mbanner .mb_text p {
        font-size: 13px;
        margin-top: 5px;
    }

    #mbanner .mb_text a {
        font-size: 13px;
        margin-top: 20px;
        padding: 0 30px;
        line-height: 35px;
    }

}

@media (max-width:768px){
    #visual {
        min-width: 100%;
        height: 350px;
    }
    #visual .sliderbx li {
        height: 350px;
        background-size: cover;
    }

    #visual .sliderbx li a {
        height: 350px;
    }
    #visual #slogan .img01 {
        font-size: 1em;
    }

    #visual #slogan .img02 {
        font-size: 2em;
    }

    #visual #slogan .img03 {
        font-size: 14px;
    }

}

.line {}

.line .left {
    position: absolute;
    top: 0;
    left: calc(calc(100% - 1400px) / 2);
    left: -webkit-calc(calc(100% - 1400px) / 2);
    bottom: 0;
    z-index: 90;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
}

.line .right {
    position: absolute;
    top: 0;
    right: calc(calc(100% - 1400px) / 2);
    right: -webkit-calc(calc(100% - 1400px) / 2);
    bottom: 0;
    z-index: 90;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
}

.line .bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
}

.line.gray {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.line.gray i {
    display: block;
    float: left;
    width: calc(100% / 3);
    height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.line.gray i:first-child {
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}

.line.wt i {
    background: rgba(255, 255, 255, 0.1);
}


#visual div.bx-pager {
    position: absolute;
    bottom: 0px;
    right: 0;
    width: calc(calc(100% - 1400px) / 2);
    height: 100px;
    z-index: 52;
    background: #0068BB;
    font-weight: 500;
    color: #fff;
    text-align: center;
    /*    opacity: 0;*/
    transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;

    display: flex;
    align-items: center;
    justify-content: center;
}

#visual div.bx-pager div {
    display: inline-block;
    margin: 0 40px 0 0;
}

#visual div.bx-pager div:last-child {
    margin: 0;
}

#visual div.bx-pager div a {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 7px;
    box-sizing: border-box;
    border-radius: 50%;
    text-indent: -9999px;
    background: #fff;
    transition: all 0.3s ease;
    opacity: 0.7;
}

#visual div.bx-pager div a.active {
    background: #fff;
    opacity: 1;
}

#visual div.bx-pager div a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    margin-top: -12px;
    margin-left: -12px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid #fff;
    opacity: 0;
    transition: all 0.3s ease;
}

#visual div.bx-pager div a.active:after {
    opacity: 1;
}

@keyframes scroll {
    from {
        top: 0;
    }

    to {
        top: 10px;
    }
}


/* 공지사항 */
.area_notice {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    background: #fff;
    z-index: 50;
    transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.5s;
    padding-left: calc(calc(100% - 1400px) / 2);
}


@media (max-width:1800px) {
    #topm,
    #visual div.bx-pager{
        width: 200px;
        z-index: 1;
    }
}
@media (max-width:1400px) {
    .line > i,
    #topm,
    #visual div.bx-pager{
        display: none;
    }
}

@media screen and (max-width:1024px) {
    .area_notice {
        width: 100%;
    }

    .area_notice .bx-wrapper li > a {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media screen and (max-width:768px) {
    .scrolldown {
        width: 80px;
        height: 80px;
        display: none;
    }

    .scrolldown .icon {
        top: 12%;
    }

    .scrolldown a > i.txt {
        padding-top: 40px;
    }

    .scrolldown a > i.txt:before {
        bottom: -8px;
    }

    .area_notice {}
}

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

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

    .scrolldown {
        width: 70px;
        height: 70px;
    }

    .area_notice {}

    .scrolldown .icon {
        top: 17%;
        width: 18px;
        height: 26px;
    }

    .scrolldown a > i.txt:before {
        display: none;
    }

    .scrolldown a > i.txt {
        font-size: 11px;
    }
}