@charset "utf-8";

.header {position: relative; width: 1170px; margin: 0 auto;}
.header .top_wrap {position: absolute; height: 60px;}
.header .inner {position: absolute; left: 0; top: 0; width: 100%; z-index: 999;}
.header .inner:after {content: ''; height: 0; transition: height 0.1s; z-index: -1;}
.header .inner:hover:after {position: absolute; left: 0; right: 0; top: 0; height: 77px; background-color: rgba(0, 0, 0, 0.6); }

.header .logo {position: absolute; left: 33px; top: 11px; z-index: 9;}
.header .logo a {display: block; width: 170px; height: 60px; background: url('../images/mip_logo_w.png') no-repeat 0 0; background-size: 100%; font-size: 0; text-indent: -9999px;}
/* .header.main .logo a {width: 170px; background: url('../images/mip_logo_w.png') no-repeat 0 0; background-size: 100%;} */
.header .gnb {width: 100%; padding: 14px 0 0 513px; line-height: 50px;}
.header .gnb ul:after {content: ""; display: block; clear: both;}
.header .gnb li {float: left; padding: 0 5px; margin-right: 50px;}
.header .gnb li a {font-family: 'Pretendard-Bold'; font-size: 21px; color: #fff;}
.header .gnb li a:hover,
.header .gnb li a.active,
.header.sub .gnb li a.active {color: #ff0000;}
.header .gnb .lang {position: absolute; right: 41px; top: 27px; line-height: 23px; font-size: 10px; color: #fff9f9;}
.header .gnb .lang a {display: inline-block; height: 21px; padding: 0 9px; border-radius: 4px; background-color: rgba(1, 1, 1, 0.36); font-size: 10px; color: #fff9f9; line-height: 23px;}
.header .visual {position: relative;}
.header .visual .pic_pc {display: block;}
.header .visual .pic_mob {display: none;}
.header .txt {position: absolute; left: 50px; bottom: 43px; font-family: 'Pretendard-ExtraLight'; font-size: 58px; font-weight: 200; line-height: 1; letter-spacing: -1.22px; color: #fff;}
.header .gnb .btn_sns {display: none;}

/* .header.sub .gnb li a {color: #000;} */
.header.sub .lang {color: #000;}

.footer {height: 120px; margin-top: 120px; background: #2f2f2f; font-size: 12px; text-align: center; color: #fff; line-height: 120px;}

/* tab_menu */
.box_tab_menu {position: relative; width: 100%;}
.box_tab_menu .tab_menu {display: flex; display: -ms-flexbox; display: -webkit-flex; -webkit-align-items: center; -ms-flex-align: center;
flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; align-items: flex-start; flex-direction: row;}
.box_tab_menu .tab {position: relative; flex: 0 0 auto; margin-right: 30px;}
.box_tab_menu .tab .tab_link {font-size: 30px; line-height: 1.45; letter-spacing: -1px; color: #8c8c8c;}
.box_tab_menu .tab.on .tab_link {color: #000;}
.box_tab_menu.default {margin-top: 80px;}
.box_tab_menu.default .tab {margin-right: 45px;}
.box_tab_menu.default .tab .tab_link {font-family: 'Pretendard-Bold'; font-size: 40px;}
.box_tab_menu.default .tab:after {content: ''; display: inline-flex; width: 1px; height: 30px; margin-left: 45px; background: #000; vertical-align: middle;}
.box_tab_menu.default .tab:last-child:after {display: none;}

.tab_container {width: 100%;}
.tab_container .form_wrap {margin-top: 40px;}
.tab_container .form_wrap .tab.on .tab_link:after {content: ''; display: block; width: 100%; height: 4px; background: #000; animation: 1.5s wide; animation-duration: 0.1s;}
@keyframes wide {
    0%{
        transform: scaleX(0)
    }
    100%{
        transform: scaleX(100%)
    }
}
.tab_container .box_tab_menu {margin-bottom: 45px;}
.tab_container .tab_cont {display: none;}
.tab_container .tab_cont.on {display: block;}
.tab_container .tab_cont:focus {outline: none;}

h1 {position: relative; font-family: 'Pretendard-Bold'; font-size: 72px; color: #000; line-height: 58px; letter-spacing: -4px; overflow: hidden; z-index: 0;}
h1 p {display: inline-block; padding-right: 50px; background: #f6f5f5; z-index: 10;}
h1:after {content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; background: #000; z-index: -1;}
h1 p br {display: none;}
h2 {font-family: 'Pretendard-Bold'; font-size: 40px; color: #000;   letter-spacing: 0.31px;}
.cont_wrap .inner {width: 1170px; margin: 0 auto;}
.cont_wrap .desc,
.contents .desc {font-size: 24px; font-weight: 500; line-height: 1.25; color: #000;}

.cont_wrap .btn_detail {display: flex; font-family: 'Pretendard-Bold'; font-size: 24px; color: #000; line-height: 1em; letter-spacing: -0.67px;}
.cont_wrap .btn_detail:after {content: ''; display: block; width: 36px; height: 37px; margin: 5px 0 0 10px; background: url('../images/ico_detail.png') no-repeat 0 0;}/* animation: 1.5s detail infinite; */
@keyframes detail {
    0%{
        transform: translateX(0px)
    }
    100%{
        transform: translateX(15px)
    }
}
.cont_wrap .btn_more {text-align: center;}
.cont_wrap .btn_more a {display: inline-block; margin: 0 auto; padding-bottom: 35px; background: url('../images/ico_more01.png') no-repeat 50% 100%; font-family: 'Pretendard-Bold'; font-size: 20px; color: #000; line-height: 1.2; letter-spacing: -0.02px; animation: 1.5s pop infinite;}
@keyframes pop {
    0%{
        transform: translateY(0px)
    }
    50%{
        transform: translateY(-15px)
    }
    100%{
        transform: translateY(0px)
    }
}
.cont_wrap .dec_txt {margin-top: 38px; font-size: 22px; color: #000; line-height: 30px;}

.btn_map {display: inline-block; width: 75px; height: 26px; margin-top: 75px; background: url('../images/btn_map.png') 0 0 no-repeat; background-size: 100%;}
.btn_sns {margin-top: 18px; text-align: right;}
.btn_sns a {display: inline-block; text-indent: -9999px;}
.btn_sns a.lnk_insta {width: 26px; height: 26px; margin-right: 15px; background: url('../images/btn_insta.png') no-repeat 0 0; background-size: 100% 100%;}
.btn_sns a.lnk_youtube {width: 36px; height: 26px; background: url('../images/btn_youtube.png') no-repeat 0 0 ; background-size: 100% 100%;}

.img_pc {display: inline-block;}
.img_mo {display: none;}

.wwd {width: 1170px; margin: 80px auto 80px;}
.wwd h1 {margin-bottom: 27px;}
.wwd .con_list {display: flex; flex-flow: wrap; margin: 40px 0 80px;}
.wwd .tab_cont > .con_list {margin: 0 0 100px;}
.wwd .con_list li {margin-right: 30px;}
.wwd .con_list li:nth-child(3n) {margin-right: 0;}
.wwd .con_list li:nth-child(1n+4) {margin-top: 30px;}
.wwd .con_list li {position: relative;}
.wwd .con_list li a {display: block; width: 100%; height: 100%;}
.wwd .con_list li p {display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 20%; margin: 0 auto; transition-duration: 0.15s; text-align: center; font-size: 26px; line-height: 1em; letter-spacing: -2px; color: #fff; opacity: 0; overflow: hidden;}
.wwd .con_list li:hover p,
.wwd .con_list li.hover p {width: 100%; background: rgba(0, 0, 0, 0.6); opacity: 1; cursor: pointer;}
.wwd .form_wrap .desc {margin-bottom: 50px;}

.aboutus {padding: 80px 0; background: #2f2f2f;}
.aboutus h1 {color: #fff;}
.aboutus h1 p {background: #2f2f2f;}
.aboutus h1:after {background: #fff;}
.aboutus dl {max-width: 620px; margin: 148px 0 0 30px;}
.aboutus dt {font-family: 'Pretendard-Bold'; font-size: 32px; line-height: 32px; letter-spacing: 0; color: #f6f5f5;}
.aboutus dd {margin-top: 65px; font-family: 'Pretendard-Light'; font-size: 22px; line-height: 1.59; letter-spacing: -0.65px; color: #fff;}
.aboutus .btn_detail {margin-top: 115px; color: #fff;}
.aboutus .btn_detail:after {background: url('../images/ico_more03.png') no-repeat 0 0;}
.aboutus .img_card {position: relative;}
.aboutus .img_card .visu01 {right: 205px; top: 36px; z-index: 1;}
.aboutus .img_card .visu02 {right: 0; top: 232px;}
.aboutus .img_card p {position: absolute; width: 285px; height: 404px;}

.client {width: 1170px; margin: 80px auto 0;}
.client .desc {display: none;}
.client .cln_list {margin: 80px 0 100px 38px;}
.client .form_wrap .cln_list {margin-top: 70px;}
.client .cln_list ul {display: flex; flex-wrap: wrap;}
.client .cln_list li {margin-right: 11px; margin-bottom: 10px;}
.client .cln_list li:nth-child(5n) {margin-right: 0;}
.client .box_tab_menu .tab {margin-right: 55px;}
.client .box_tab_menu .tab .tab_link {font-weight: 700;}
.client .tab.on .tab_link:after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background: #000;
    animation: 1.5s wide;
    animation-duration: 0.1s;
}

.contact {width: 1170px; margin: 180px auto 0;}
.contact .desc {margin: 135px 0 0 35px;}
.contact .desc .text01 {margin-bottom: 45px; font-family: 'Pretendard-Bold'; font-size: 26px; line-height: 0.65; letter-spacing: -0.7px; color: #000;}
.contact .desc .text02 {display: flex; font-family: 'Pretendard-Bold'; font-size: 22px; line-height: 1.25; letter-spacing: -0.65px; color: #000;}
.contact .desc .text02 li:first-child {position: relative; padding-right: 10%; margin-right: 10%;}
.contact .desc .text02 li:first-child:after {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    display: inline-block;
    width: 1px;
    height: 85px;
    background-color: #979797;
}
.contact .desc .text02 li div {margin-bottom: 25px;}
.contact .desc .text02 li p {font-size: 21px; font-family: 'Pretendard'; line-height: 1.2;}
.contact .desc .text02 li:last-child p {line-height: 1.5;}
.contact .btn_sns {margin: 60px 0 0 30px; text-align: left;}
.contact .location {margin-top: 70px;}/* display: block; position: relative; width: 100%; height: 46rem; */
.contents .contact {margin-top: 0;}
.contents .contact .desc {margin: 70px 0 0 50px;}
/* .contents .contact .desc .text01 {display: none;} */
.contents .contact .btn_sns {margin: 90px 0 0 50px;}
.root_daum_roughmap .wrap_map {height: 400px;}

.contents {width: 1170px; margin: 80px auto 0;}
.contents .desc {margin-top: 100px;}
.contents .box_tab_menu {margin-top: 95px;}

.about_wrap h2 {margin-top: 110px;}
.about_wrap .cont_wrap {padding-bottom: 956px;}
.about_wrap .cont_wrap.enbtm {padding-bottom: 1205px;}
.about_wrap .sb_org {margin: 80px 0 130px;}
.about_wrap .gray_box {position: absolute; left: 0; right: 0; height: auto; background: #6f6f6f;}
.about_wrap .gray_box h2 {color: #fff;}
.about_wrap .sb_str {position: relative; margin-top: 130px; padding-bottom: 160px;}
.about_wrap .sb_str .pic {position: absolute; top: 0; left: 50%; margin-left: -375px; padding-top: 20px; text-align: center;}
.about_wrap .sb_str ul {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: space-around; width: 100%;}
.about_wrap .sb_str li {width: 50%;}
.about_wrap .sb_str li div {margin-bottom: 30px; font-family: 'Pretendard-Bold'; font-size: 26px; line-height: 1; letter-spacing: 0.2px; color: #fff;}
.about_wrap .sb_str li:nth-child(odd) {padding-right: 340px; text-align: right;}
.about_wrap .sb_str li:nth-child(even) {padding-left: 310px;}
.about_wrap .sb_str li:nth-child(odd):first-child,
.about_wrap .sb_str li:nth-child(even):first-child {height: 430px;}
.about_wrap .sb_str li p {font-size: 16px; font-weight: 500; line-height: 1.75; letter-spacing: 0.02px; color: #fff;}

.leadership {display: flex; margin-top: 110px;}
.leadership .dual {display: flex;}
.leadership .dual dl {display: flex; align-content: space-between; flex-wrap: wrap; margin: 10px 0 0 15px;}
.leadership dt {font-family: 'Pretendard-Bold'; font-size: 20px; line-height: 1.5; letter-spacing: 0.15px; color: #000;}
.leadership dd {font-size: 16px; font-weight: 500; line-height: 1.75; letter-spacing: 0.02px; color: #000;}

/* slick slide */
.main_wrap .case_card {
    opacity: 0;
}
.slick-slide img {min-width: 100%;}
.main_wrap .case_card:first-child,
.main_wrap .case_card.slick-active {
    opacity: 1;
}
.slick_wrap {
    position: relative;
    background: #000;
    overflow: hidden;
}
.slick_wrap .slick-prev,
.slick_wrap .slick-next {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    background: #000;
    font-size: 1;
    text-indent: -9999px;
    z-index: 1;
}
.slick_wrap .slick-prev {left: 0;}
.slick_wrap .slick-next {right: 0;}

/* slide button */
.main_slide .slick-button-box {
    position: absolute;
    bottom: 58px;
    left: 150px;
}
.main_slide .slick-slide {position: relative;}
.main_slide .slick-prev,
.main_slide .slick-next {
    position: relative;
    width: 50px;
    height: 50px;
    box-shadow: none;
    border: 0;
    background-color: transparent;
}
.main_slide .slick-prev {background: url(../images/btn_slide_left.png) 0 0 no-repeat; background-size: 100%;}
.main_slide .slick-next {margin-left: 15px; background: url(../images/btn_slide_right.png) 0 0 no-repeat; background-size: 100%;}

/* video pop */
#view_you {width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.7);top:0;left: 0;z-index: 999;display: none;}
#.view_wrap {width: 743px;height: 100%;position: relative;margin: 150px auto;}
.view_wrap {width: 890px;height: 100%;position: relative;margin: 70px auto;}
#.video_box {height: 532px;}
.view_inner {width: 100%;height: auto;overflow: auto;background: none;margin: 80px auto;position: relative;}

.video_text_box {font-size: 15px;padding:20px;background: #fff;color: #666;width: 100%;}
/* .video_text_box > div {float: left;}
.video_text_box > div.video_text_l {width: 40%;}
.video_text_box > div.video_text_r {width: 55%;} */

.video_text_box > div.video_text_l .date {font-size: 15px;margin-top: 20px;display: block;}
.pop_close {font-size: 25px;color: #fff;position: absolute;top:-45px;right:0;}
.subject {font-size: 18px;color: #1d1d1d;letter-spacing: -0.02em;}
.date {margin-top: 10px; font-size: 14px;color: #666;letter-spacing: -0.02em;}
.content_s {font-size: 15px;color: #666666;letter-spacing: -0.02em;}