@charset "UTF-8";
.main footer{margin-top: 0;}

/* ==================== visual ==================== */
.intro{height: 600px;}
.intro .bx-wrapper{height: 600px;}
.intro .bx-viewport{height: 600px !important;}
.carousel-inner{text-align: center;}
.carousel-inner .item{height: 600px;}
.intro .content_wrap{position: relative;}
.intro .slide-box{
    position: absolute; right: 30px; bottom: 50px; width: 160px; padding: 15px; background-color: rgba(0,0,0,0.7); font-size: 0;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.intro .slide-counter{display: inline-block; font-size: 20px; color: #fff;}
.intro .slide-counter strong{font-size: 20px; color: #fff;}
.intro .bannera_btn{ float: right; display: inline-block; font-size: 0; vertical-align: top;}
.intro .bannera_btn > *{ display: inline-block; vertical-align: top;}
.prev_bannera{ display: inline-block;width: 30px; height: 30px; background: url(../img/common.png) no-repeat; background-position: -222px -199px;}
.next_bannera{ float: right; display: inline-block;width: 30px; height: 30px;  background: url(../img/common.png) no-repeat; background-position: -262px -199px;}
.playstop_bannera{font-size: 20px; color: #fff;}
.intro .bx-stop{ display: block; width: 30px; height: 30px; font-size: 0; background: url(../img/common.png) no-repeat; background-position: -307px -199px;}
.intro .bx-start{ display: block; width: 30px; height: 30px; font-size: 0; background: url(../img/common.png) no-repeat; background-position: -347px -199px;}
.prev_bannera a{display: block; width: 30px; height: 30px; font-size: 0;}
.next_bannera a{display: block; width: 30px; height: 30px; font-size: 0;}
.intro .contents { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; margin-top: -30px; text-align: center;}
.intro .contents strong{ display: block; margin-bottom: 12px; padding: 0px 32px; font-size: 40px;  color: #fff; word-break: keep-all;}
.intro .contents p{ display: block; margin-bottom: 24px; padding: 0px 32px; font-size: 22px; color: #fff; word-break: keep-all; letter-spacing: -1px;}
.intro .contents button{ margin-top: 30px; background-color: rgba(0,0,0,0.4); color: #fff; border: 1px solid #fff;}
.intro .contents .symbol{margin: 0 auto;}
.intro .contents .symbol img{margin: 0 auto;}
.bannera_btn_middle{position: absolute; top: 15px; right: 39px;}
.bannera_btn_box{width: 80px;}

.bx-controls-auto-item a{display: none;}
.bx-controls-auto-item a.acgive{display: block;}


/* ==================== msection1 ==================== */
.msection1{position: relative; top: -20px;}
.msection1_wrap{font-size: 0; border: 3px solid #006db9; background-color: #fff;}
.mabout_go{ display: inline-block; width: 20%; height: 150px; vertical-align: top;}
.mabout_go a{
    position: relative; display: block; swidth: 100%; height: 100%; padding: 25px 30px;
    font-size: 22px; color: #fff; background-color: #272f45;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.mabout_go .ico-marrow{
    position: absolute; bottom: 30px; right: 30px; display: inline-block; width: 42px; height: 35px;
    background: url(../img/common.png) no-repeat; background-position: -8px -196px;
}
.mabout{display: inline-block; width: 80%; height: 150px; font-size: 0; vertical-align: top; background-color: #fff;}
.mabout li{display: inline-block; width: 25%; height: 100%; vertical-align: top;}
.mabout li a{
    display: block; height: 100%; padding: 25px 30px; font-size: 20px; border-right: 1px solid #006db9;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.mabout li:nth-of-type(4) a{border-right: 0;}
.mabout .mabout_tit{font-size:22px; font-weight: 700;}
.mabout .mabout_desc{height: auto; max-height: 54px; margin-top: 10px; font-size:18px;}

/* ==================== msection2 ==================== */
.mlink{margin: 30px 0 50px; font-size: 0; border-left: 1px solid #d4d4d4;}
.mlink li{display: inline-block; width: 16.666%; height: 100%; vertical-align: top;}
.mlink li a{
    position: relative; display: block; width: 100%; height: 100%; padding-top: 90px;
    font-size: 20px; text-align: center; border-right: 1px solid #d4d4d4;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.mlink li a:before{
    content: ''; position: absolute; top: 5px; left: 50%;
    width: 80px; height: 75px; background: url(../img/common.png) no-repeat; background-position: 10px -242px;
    -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.mlink li:nth-of-type(1) a:before{background-position: 10px -242px;}
.mlink li:nth-of-type(2) a:before{background-position: -68px -242px;}
.mlink li:nth-of-type(3) a:before{background-position: -160px -242px;}
.mlink li:nth-of-type(4) a:before{background-position: -250px -242px;}
.mlink li:nth-of-type(5) a:before{background-position: -335px -242px;}
.mlink li:nth-of-type(6) a:before{background-position: -424px -242px;}
.mlink .mlink_tit{font-size: 18px; font-weight: 700;}
.mlink .mlink_desc{font-size: 16px;}

/* ==================== msection3 ==================== */
.msection3{padding: 30px 0; background-color: #93b2c7;}
.mcolumns{font-size: 0;}
.mcolumn{
    position: relative; display: inline-block; overflow: hidden;
    width: calc((100% - 50px) / 3); height: 445px; padding: 24px;
    background-color: #fff; font-size: 20px; vertical-align: top;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.mcolumn:nth-of-type(3){padding: 24px 0;}
.mcolumn:nth-of-type(3) .mtitle_h3{padding: 0 24px;}
.mcolumn + .mcolumn{margin-left: 25px;}
.mpreview li{ display: block; width: 100%;}
.mpreview li+li{margin-top: 10px;}
.mpreview li a{display: block;font-size: 0; line-height: 1.4;}
.mcolumn_btn{position: absolute; top: 20px; right: 20px;}
.mcolumn_btn .more{
    display: inline-block; width: 30px; height: 30px; text-indent: -99999px;
    background: #fff url(../img/common.png) no-repeat; background-position: -69px -198px;
}
.mcolumn_btn > div{display: inline-block; width: 30px; height: 30px; font-size: 0; vertical-align: top;}
.mcolumn_btn a{display: block; width: 100%; height: 100%;}
.mcolumn_btn .face_prev{background: #fff url(../img/common.png) no-repeat; background-position: -119px -198px;}
.mcolumn_btn .face_next{background: #fff url(../img/common.png) no-repeat; background-position: -169px -198px;}
.mtitle_h3{font-size: 24px; line-height: 1.25; margin-bottom: 15px;}
.mpreview_tit{font-size: 18px;}
.mpreview_date{font-size: 17px; color: #979797;}
.mpreview_desc{height: auto; max-height: 46px; margin-top: 4px; font-size: 17px; color: #676767;}
.mpreview_main{padding-bottom: 10px;}
.mpreview_main .mpreview_date{
    position: absolute; left: 0; top: 70px; display: block; width: 23%; height: 105px;
    font-weight: 700; color: #fff; line-height: 1.2; background-color: #93b2c7; vertical-align: top;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    flex-direction: column;
}
.mpreview_main .mpreview_date em{display: block; font-size: 42px; font-weight: 700;}
.mpreview_main .mpreview_main_box{display: inline-block; width: 76%; padding-left: 24%; vertical-align: top;}
.mpreview_main .mpreview_tit{height: auto; max-height: 60px; font-size: 22px; font-weight: 700; color: #000;}
.mface_img{
    height: 290px; overflow: hidden; background-color: #fff;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.bx-wrapper .mface_img img{min-height: 290px; max-width: none;}
.mface_txt{
    height: auto; max-height: 65px; padding: 15px 24px 0 24px; font-size: 17px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

/* ==================== 영문 ==================== */
.message_img{width: 100%; padding-top: 10px;}
.message_img img{width: 100%;}
.message_leader{padding: 15px 0 35px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 20px;}
.message_leader strong{display: block; font-weight: 700;}
.message_leader:after{content: ''; display: block; clear: both;}
.message_leader .leader_left{float: left; text-align: left;}
.message_leader .leader_right{float: right; text-align: right;}






.en .mlink li{width: 20%; height: 185px}
.en .mlink li a{padding-top: 105px;}
.en .mlink li:nth-of-type(2) a{padding-top: 95px;}

@media screen and (max-width: 1400px) {
    .mabout_go{display: block; width: 100%; height: 80px;}
    .mabout{width: 100%; height: 140px;}
    .mabout_go .ico-marrow{bottom: 25px;}
    .mabout li a{padding: 20px;}

    .mlink{border-left: none;}
    .mlink li{width: 33.333%;}
    .mlink li:nth-of-type(1) ,
    .mlink li:nth-of-type(2) ,
    .mlink li:nth-of-type(3) {margin-bottom: 35px; padding-bottom: 35px; border-bottom: 1px solid #d4d4d4;}
    .mlink li:nth-child(3n) a{border-right: none;}

    .en .mlink{border-left: none;}
    .en .mlink li{width: 33.333%;}
    .en .mlink li:nth-of-type(1) ,
    .en .mlink li:nth-of-type(2) ,
    .en .mlink li:nth-of-type(3) {margin-bottom: 35px; padding-bottom: 35px; border-bottom: 1px solid #d4d4d4;}
    .en .mlink li:nth-child(3n) a{border-right: none;}

    .mcolumn{width: calc((100% - 20px) / 3); height: 410px;}
    .mcolumn+.mcolumn{margin-left: 10px;}
    .mtitle_h3{font-size: 22px;}
    .mpreview_main{padding-bottom: 2px;}
    .mpreview_main .mpreview_tit{font-size: 17px;}
    .mpreview_desc{font-size: 16px;}
    .mpreview_tit{font-size: 16px;}
    .mpreview_date{font-size: 15px;}
    .mpreview_main .mpreview_date{top: 67px; height: 90px;}
    .mpreview_main .mpreview_date em{font-size: 30px;}
    .mface_img{height: 260px;}
    .bx-wrapper .mface_img img{min-height: 260px;}

    .message_leader{font-size: 15px;}


}
@media screen and (min-width: 769px) and (max-width: 920px) {
    .message_leader .leader_left{float: none; text-align: left;}
    .message_leader .leader_right{float: none; text-align: left; margin-top: 10px;}
}



@media screen and (max-width: 768px) {
    .intro .contents strong{font-size: 30px;}
    .intro .contents p{font-size: 18px;}
    .intro .slide-box{right: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 150px; padding: 10px 15px;}
    .bannera_btn_middle{top: 10px; right: 39px;}
    .intro .slide-counter{font-size: 18px; line-height: 32px;}
    .intro .slide-counter strong{font-size: 18px; line-height: 32px;}
    .intro .contents .symbol{padding: 0 10px;}

    .mabout{height: auto;}
    .mabout li{width: 100%;}
    .mabout li a{border-right: 0; border-bottom: 1px solid #006db9;}
    .mabout li:nth-of-type(4) a{border-bottom: 0;}
    .mabout_go{height: 60px;}
    .mabout_go a{font-size: 20px; padding: 15px 0 0 15px;}
    .mabout .mabout_tit{font-size: 17px;}
    .mabout .mabout_desc{max-height: 42px; margin-top: 0; font-size: 15px;}
    .mabout li a{padding: 15px;}
    .mabout_go .ico-marrow{bottom: 13px; right: 15px; background-size: 900% auto; background-position: -2px -145px; }

    .mlink{margin: 10px 0 35px;}
    .mlink li{width: 50%;}
    .mlink li:nth-of-type(1) ,
    .mlink li:nth-of-type(2) ,
    .mlink li:nth-of-type(3) {padding-bottom: 0; border-bottom: 0;}
    .mlink li a{border-right: 0;}
    .mlink .mlink_tit{font-size: 16px;}
    .mlink .mlink_desc{font-size: 15px;}

    .en .mlink{margin: 10px 0 35px;}
    .en .mlink li{width: 50%;}
    .en .mlink li:nth-of-type(1) ,
    .en .mlink li:nth-of-type(2) ,
    .en .mlink li:nth-of-type(3) {padding-bottom: 0; border-bottom: 0;}
    .en .mlink li a{border-right: 0;}
    .en .mlink .mlink_tit{font-size: 16px;}
    .en .mlink .mlink_desc{font-size: 15px;}

    .mcolumn{display: block; width: 100%; height: auto; padding: 20px;}
    .mcolumn+.mcolumn{margin-left: 0; margin-top: 15px;}
    .mtitle_h3{font-size: 20px; margin-bottom: 20px;}
    .mpreview_desc{max-height: 45px; font-size: 15px;}
    .mpreview_tit{font-size: 15px;}
    .mpreview_date{font-size: 15px;}
    .mpreview_main .mpreview_tit{max-height: 48px;}
    .mpreview_main .mpreview_date{top: 66px; height: 86px;}
    .mcolumn_btn{top: 18px; right: 18px;}
    .mface_txt{max-height: 61px; font-size: 15px;}

    .message_img{padding-top: 0;}
    .message_leader{padding: 0;}
}