/* visual */
.main-visual { position: relative; overflow: hidden; margin: 0 auto; max-width: 1920px; } 
.main-visual .bx-slider img { display: block; width: 100%; }
.main-visual .bx-content { position: absolute; left: 50%; bottom: 0; width: 50%; height: 340px; background: #be1e2d }
.main-visual .bx-content > div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 30px; }
.main-visual .bx-content .bx-pager { position: relative; margin-bottom: 26px; overflow: hidden; font-size: 0; }
.main-visual .bx-content .bx-pager a { display: inline-block; *display: inline; *zoom: 1; overflow: hidden; width: 6px; height: 6px; text-indent: -999em; *text-indent: 0; background: #fff; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; opacity: .3; filter: alpha(opacity=30); -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; }
.main-visual .bx-content .bx-pager a.active { width: 30px; opacity: 1; filter: alpha(opacity=100); }
.main-visual .bx-content .bx-pager a + a { margin-left: 10px; }
.main-visual .bx-content .bx-control { position: absolute; left: 0; bottom: 0; margin-left: -60px; width: 60px; height: 120px; }
.main-visual .bx-content .bx-control a {  position: relative; display: block; width: 60px; height: 60px; background: #fff url(../img/common/bx-control.png) no-repeat; }
.main-visual .bx-content .bx-control a + a { margin-top: -1px; border-top: 1px solid #be1e2d; background-position: -60px 0; }
.main-visual .bx-content .bx-message li { position: absolute; display: none; word-break: keep-all; color: #fff; }
/*.main-visual .bx-content .bx-message li dt { -webkit-transition: opacity 2.5s cubic-bezier(.19, 1, .22, 1); -moz-transition: opacity 2.5s cubic-bezier(.19, 1, .22, 1); -ms-transition: opacity 2.5s cubic-bezier(.19, 1, .22, 1); -o-transition: opacity 2.5s cubic-bezier(.19, 1, .22, 1); transition: opacity 2.5s cubic-bezier(.19, 1, .22, 1); opacity: 0; }*/
.main-visual .bx-content .bx-message li dt p { font-size: 28px; font-weight: 700; color: #fff; line-height: 1.4; }
.main-visual .bx-content .bx-message li dt p.line { margin: 20px 0; width: 40px; height: 3px; background: #fff; }
.main-visual .bx-content .bx-message li dd p { font-size: 15px; font-weight: 500; line-height: 1.4; }
/*.main-visual .bx-content .bx-message li.active dt { opacity: 1; }*/
.main-visual .bx-content .bx-message li .more { display: inline-block; *display: inline; *zoom: 1; margin-top: 20px; width: 120px; height: 28px; line-height: 28px; border: 1px solid #fff; border-radius: 28px; font-size: 12px; font-weight: 300; color: #fff; text-align: center; }


/* common */
.section-latest,
.section-contact { position: relative; padding: 70px 0; overflow: hidden; }
.section-contact { padding-bottom: 0; }

.section-button { margin-top: 50px; text-align: center; }
.section-button a { display: inline-block; *display: inline; *zoom: 1; }
.section-button a span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
.section-button a span.ico { width: 24px; height: 24px; background: url(../img/common/ic-plus-red.png) no-repeat; }
.section-button a span.txt { font-size: 16px; }


/* notice */
.notice-list { position: relative; overflow: hidden; }
.notice-list ul { position: relative; overflow: hidden; }
.notice-list li { position: relative; float: left; width: 298px; }
.notice-list li + li { margin-left: 2px; }
.notice-list li a { display: block; position: relative; overflow: hidden; height: 0; padding-bottom: 118%; background: #f0f0f0; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; }
.notice-list li a:hover { background: #be1e2d; color: #fff; }
.notice-list li .inner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 25px; }
.notice-list li .category { margin-bottom: 10px; font-size: 14px; font-weight: 300; }
.notice-list li .subject { margin-bottom: 10px; font-size: 18px; font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.7; height: 5.1em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.notice-list li .thumb { position: relative; overflow: hidden; height: 0; padding-bottom: 47.24409448819%; }
.notice-list li .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.notice-list li .more { position: absolute; left: 25px; bottom: 25px; display: inline-block; *display: inline; *zoom: 1; padding: 10px 15px; border: 1px solid #000; border-radius: 100px; font-size: 10px; font-weight: 300; line-height: 1; -webkit-transition: border-color .4s; -o-transition: border-color .4s; transition: border-color .4s; }
.notice-list li a:hover .more { border-color: #fff; }


/* event */
.event-list { position: relative; overflow: hidden; }
.event-list ul { position: relative; overflow: hidden; margin: -1px; }
.event-list li { float: left; width: 50%; }
.event-list li + li:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 100; width: 1px; background: #fff; }
.event-list li a { position: relative; display: block; margin: 1px; }
.event-list li .thumb { position: relative; height: 0; overflow: hidden; padding-bottom: 64.16666666667%; }
.event-list li .thumb img { position: absolute; left: 0; top: 50%; bottom: 50%; margin: auto; width: 100%; }
.event-list li .meta { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/opacity/b50.png); text-align: center; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; }
.event-list li .meta:before { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
.event-list li .meta > div { position: relative; display: inline-block; *margin-top: 160px; vertical-align: middle; }
.event-list li .meta span { display: block; }
.event-list li .meta span.ico { margin: 0 auto; width: 32px; height: 32px; background: url(../img/common/ic-plus.png) no-repeat; }
.event-list li .meta span.txt { margin-top: 14px; font-size: 16px; font-weight: 700; color: #fff; text-align: center; }
.event-list li:hover .meta { opacity: 1; filter: alpha(opacity=100); }


/* channel */
.section-channel { background: #f0f0f0; }
.channel-list { position: relative; overflow: hidden; }
.channel-list .grid { position: relative; overflow: hidden; height: 380px; }
.channel-list .grid + .grid { margin-top: 2px; }
.channel-list .grid > div { position: relative; float: left; width: 50%; }
.channel-list .grid-2 > div { float: right; }
.channel-list .grid-column + div { width: 25%; }
.channel-list .grid-column ul { margin-left: 2px; }

.channel-list { position: relative; overflow: hidden; }
.channel-list ul { position: relative; overflow: hidden; }
.channel-list li { position: relative; }
.channel-list li + li { margin-top: 2px; }
.channel-list li a { position: relative; display: block; overflow: hidden; }
/*.channel-list li .thumb { position: relative; height: 0; overflow: hidden; padding-bottom: 64.16666666667%; }
.channel-list li.size-3 .thumb { padding-bottom: 128.33333333333%; }
.channel-list li .thumb img { position: absolute; left: 0; top: 50%; bottom: 50%; margin: auto; width: 100%; }
.channel-list li .meta { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/opacity/b50.png); opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; }
.channel-list li .meta span { display: block; padding: 30px; font-size: 16px; font-weight: 700; color: #fff; }
.channel-list li:hover .meta { opacity: 1; filter: alpha(opacity=100); }*/

.channel-list li .thumb { position: relative; height: 0; overflow: hidden;  }
.channel-list li.size-1 .thumb { padding-bottom: 380px }
.channel-list li.size-2 .thumb { padding-bottom: 190px }
.channel-list li.size-3 .thumb { padding-bottom: 380px }
.channel-list li .thumb img { position: absolute; left: 0; top: 50%; bottom: 50%; margin: auto; width: 100%; }
.channel-list li .meta { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/opacity/b50.png); opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; }
.channel-list li .meta span { display: block; padding: 30px; font-size: 16px; font-weight: 700; color: #fff; }
.channel-list li:hover .meta { opacity: 1; filter: alpha(opacity=100); }


/* banner */
.section-banner { position: relative; height: 470px; overflow: hidden; }
.section-banner .meta { height: 100%; text-align: center; }
.section-banner .meta:before { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
.section-banner .meta-content { position: relative; z-index: 200; display: inline-block; *margin-top: 90px; vertical-align: middle; color: #fff; }
.section-banner .meta-content .title { font-size: 32px; font-weight: 700; }
.section-banner .meta-content .line { display: block; margin: 24px auto; width: 48px; height: 2px; background: #fff; }
.section-banner .meta-content .desc { margin-bottom: 24px; font-size: 16px; line-height: 1.7; }
.section-banner .meta-content .more a { display: inline-block; *display: inline; *zoom: 1; padding: 8px 20px; border: 1px solid #fff; border-radius: 100px; color: #fff; }
.section-banner .meta-background { position: absolute; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; }
.section-banner .meta-background > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; }
.section-banner .meta-background > div.is-mobile { background-size: cover; }


/* partner */
.partner-list { position: relative; overflow: hidden;  margin: 0 auto; width: 960px; }
.partner-list ul { position: relative; overflow: hidden; margin: -10px; }
.partner-list li { float: left; width: 12.5%; }
.partner-list li a { display: block; margin: 10px; }
.partner-list li a .thumb { position: relative; height: 0; padding-bottom: 100%; }
.partner-list li a .thumb img { position: absolute; left: 0; top: 0; width: 100%; }


/* contact */
.contact-list { position: relative; overflow: hidden; }
.contact-list ul { position: relative; overflow: hidden; }
.contact-list li { position: relative; float: left; width: 33.3333333%; }
.contact-list li a { position: relative; display: block; padding: 25px; background: #f0f0f0; border-left: 1px solid #fff; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; }
.contact-list li a:hover { background: #be1e2d; color: #fff; }
.contact-list li a > div { position: relative; display: block; padding-left: 60px; height: 50px; }
.contact-list li .ico { position: absolute; left: 0; top: 0; width: 50px; height: 50px; background: url(../img/main/sp_contact_black.png) no-repeat; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; }
.contact-list li a:hover .ico { background-image: url(../img/main/sp_contact_white.png); }
.contact-list li .ico-map { background-position: 0 0 }
.contact-list li .ico-phone { background-position: -50px 0 }
.contact-list li .ico-kakao { background-position: -100px 0 }
.contact-list li .tit { margin-bottom: 5px; font-size: 18px; font-weight: 700; }
.contact-list li .txt { font-size: 16px; font-weight: 300; }


/* retina */
@media screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 2) { 
    .main-visual .bx-content .bx-control a {  background-image: url(../img/common/bx-control@2x.png); background-size: 120px 60px; }
    .contact-list li .ico { background-image: url(../img/main/sp_contact_black@2x.png); background-size: 150px 50px; }
    .contact-list li:hover .ico { background-image: url(../img/main/sp_contact_white@2x.png); }
}


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

    /* visual */
    .main-visual .bx-content { position: relative; left: 0; margin-bottom: 2px; width: auto; height: auto }
    .main-visual .bx-content > div { position: relative; padding: 0; height: 0; padding-bottom: 54%; }
    .main-visual .bx-content .bx-pager { position: absolute; left: 0; bottom: 15px; margin: 0; width: 100%; text-align: center; }
    .main-visual .bx-content .bx-pager a { width: 4px; height: 4px; border-radius: 4px; }
    .main-visual .bx-content .bx-pager a + a { margin-left: 10px; }
    .main-visual .bx-content .bx-pager a.active { width: 24px; }
    .main-visual .bx-content .bx-control { display: none; }
    .main-visual .bx-content .bx-message { text-align: center; }
    .main-visual .bx-content .bx-message dl { position: relative; padding: 12px; padding: 3.2vw; }
    .main-visual .bx-content .bx-message li { left: 0; width: 100%; }
    .main-visual .bx-content .bx-message li dt p { font-size: 18px; font-size: 4.8vw; }
    .main-visual .bx-content .bx-message li dt p.line { margin: 15px auto 18px; margin: 4vw auto 4.8vw; width: 48px; height: 2px; }
    .main-visual .bx-content .bx-message li dd p { font-size: 14px; font-size: 3.7333333333333334vw; }
    .main-visual .bx-content .bx-message li .more { position: absolute; left: 0; top: 0; margin-top: 0; width: 100%; height: 100%; border: 0; border-radius: 0; text-indent: -999em; }

    /* common */
    .section-latest,
    .section-contact { padding: 36px 0; padding: 9.6vw 0; }
    .section-contact { padding-bottom: 0; }

    .section-button { margin-top: 20px; margin-top: 5.333333333333333vw; }
    .section-button a span.ico { width: 15px; width: 4vw; height: 15px; height: 4vw; background-size: cover; }
    .section-button a span.txt { font-size: 14px; font-size: 3.7333333333333334vw; }

    
    /* notice */
    .notice-list ul { margin: -1px; }
    .notice-list li { width: 50%; }
    .notice-list li + li { margin-left: 0; }
    .notice-list li a { margin: 1px; }
    .notice-list li .inner { padding: 15px; }
    .notice-list li .category { margin-bottom: 9px; margin-bottom: 2.4vw; font-size: 12px; font-size: 3.2vw; }
    .notice-list li .subject { font-size: 14px; font-size: 3.7333333333333334vw; }
    .notice-list li .more { display: none; }

    
    /* event */
    .event-list ul { margin: -15px; }
    .event-list li { float: none; width: auto; }
    .event-list li a { margin: 15px; border: 0; }
    .event-list li .meta span.ico { width: 24px; width: 6.4vw; height: 24px; height: 6.4vw; background-size: 100% }
    .event-list li .meta span.txt { margin-top: 12px; margin-top: 3.2vw; font-size: 15px; font-size: 3.2vw; }
    
    
    /* channel */
    .channel-list .grid { height: auto; }
    .channel-list .grid-2 { margin-top: 2px; }
    .channel-list .grid-column { width: 100% !important; }
    .channel-list .grid-column.hide { display: none; }
    .channel-list .grid-column + div { margin-top: 2px; }

    .channel-list ul { margin: -1px; }
    .channel-list li a { margin: 1px; }
    .channel-list li.size-2 { float: left; width: 50%; }
    .channel-list li + li { margin-top: 0; }
    .channel-list li .meta span { padding: 15px; font-size: 15px; font-size: 4vw; }
    .channel-list li .thumb { padding-bottom: 64.16666666667% !important; }
    

    /* banner */
    .section-banner { padding: 40px 0; height: auto; background-size: cover; }
    .section-banner .meta-content .title { font-size: 18px; font-size: 4.8vw; }
    .section-banner .meta-content .desc { font-size: 14px; font-size: 3.7333333333333334vw; }


    /* partners */
    .partner-list { width: 90%; }
    .partner-list li { width: 25%; }
    

    /* contact */
    .contact-list { margin: 0 -15px }
    .contact-list li + li:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 100; width: 1px; height: 100%; background: #fff; }
    .contact-list li a { margin: 0; padding: 0 0 100%; height: 0; bottom: 0; overflow: hidden; }
    .contact-list li a > div { position: absolute; left: 0; top: 0; padding: 15px; width: 100%; height: 100%; }

    .contact-list li .ico { position: relative; display: inline-block; width: 24px; width: 6.4vw; height: 24px; height: 6.4vw; background-size: 72px 24px; background-size: 19.2vw 6.4vw; vertical-align: middle; }
    .contact-list li .ico-map { background-position: 0 0; }
    .contact-list li .ico-phone { background-position: -24px 0; background-position: -6.4vw 0; }
    .contact-list li .ico-kakao { background-position: -48px 0; background-position: -12.8vw 0; }

    .contact-list li .tit { display: inline-block; margin: 0; font-size: 13px; font-size: 3.3854166666666665vw; vertical-align: middle; letter-spacing: -1px; }
    .contact-list li .txt { margin-top: 9px; margin-top: 2.4vw; font-size: 14px; font-size: 3.7333333333333334vw; letter-spacing: -1px; line-height: 1.4; }

}