@charset "UTF-8";

/* kk = kiosk */ 

/* main row 가로 1920 x 1080 */
.main_row{width: 1920px; height: 100%;}

/* kkr column  세로1080 x 1920 */
.main_col{width: 1080px; height: 1920px;}



/* ==================================== 종합안내도 메인 세로 main_col : main ==================================== */
.main_col{font-family: 'Arita';}
.main_col .inner{width: 1020px; margin: 0 auto;}
.main_col .header{
    position: relative; background-color: #313131;
    width: 100%; height: 100px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.main_col .header *{color: #d2d2d2;}
.main_col .header .inner{
    height: 100%;
    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;
    -webkit-justify-content: space-between; justify-content: space-between;
}
.main_col .header .util{text-align: right; letter-spacing: -1px;}
.main_col .header .util input{text-align: right; background: transparent; }
.main_col .header .util p{display: inline-block; width: 250px;}
.main_col .header .util p input{width: 100%; font-family: 'Arita'; font-size: 30px; font-weight: 100;}
.main_col .header .util strong{display: inline-block; width: 190px;}
.main_col .header .util strong b{display: block;}
.main_col .header .util strong b input{width: 100%; height: 55px; font-family: 'Arita'; font-size: 70px; line-height: 55px; font-weight: 600; vertical-align: bottom;}




/*  */
.main_col .contents{position: relative; height: 1420px; background: url(../images/main_col_bg.jpg) no-repeat;}
/* .main_col .floor_title{position: relative; top: 80px; display: block; font-size: 150px; line-height: 165px; font-weight: 800; color: #313131; text-align: center; letter-spacing: -3px;} */
/* .main_col .floor_title:before{content:''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 200px; height: 10px; background-color: #313131; border-radius: 10px;} */


.main_col .floor_wrap{width: 100%; height: 100%; margin: 0 auto; text-align: center;}
.main_col .floor_wrap .floor_title{position: relative; display: inline-block; margin-top: 80px; font-size: 120px; line-height: 150px; font-weight: 700; color: #333;}
.main_col .floor_wrap .floor_title:before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background-color: #333; border-radius: 10px;}
.main_col .floor_wrap ul{position: absolute; bottom: 95px; display: block; width: 100%; margin: 0 auto;}
.main_col .floor_wrap li{display: inline-block; width: 120px; height: 120px;margin: 0 auto; border-radius: 50%; text-align: center; font-size: 45px; line-height: 120px; font-weight: 600; color: #777; background-color: #fff; border: 1px solid #ccc;}
.main_col .floor_wrap li+li{margin-left: 20px;}
.main_col .floor_wrap li.active{background-color: #2598f1; color: #fff;}
.main_col .map_area{
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 1040px; height: 455px;
}
.main_col .floor_wrap li a{display: block;}






.main_col .footer_desc{font-size: 65px; line-height: 170px; color: #fff; letter-spacing: -1px; text-align: center;}
.main_col .footer_desc em{font-weight: 600; color: #ffcc00;}



.main_col .btn_wrap{
    position: absolute; top: 0; left: 0; 
    width: 100%;
    height: 100%; 
}
.main_col .btn_wrap li p{
    position: absolute;
    height: 33px; width: 100px; padding: 0 10px 0 40px;
    font-size: 16px; line-height: 33px;
    text-align: right;
    background-color: #fff;
}

.main_col .btn_wrap li.openModal3{
    position: absolute; top: 56px; left: 37px;
    width: 308px; height: 363px;
    transform: skew(-7deg);
    /* background-color: rgba(0,0,0,0.4); */
}
.main_col .btn_wrap li.openModal3 p{
    bottom: 20px; left: 50%; 
    transform: skew(7deg) translateX(-50%);
}


.main_col .btn_wrap li.openModal4{
    position: absolute; top: 56px; left: 363px;
    width: 130px; height: 137px;
    transform: skew(-4deg);
    /* background-color: rgba(233,0,0,0.4); */
}
.main_col .btn_wrap li.openModal4 p{
    bottom: 20px; left: 50%; 
    transform: skew(4deg) translateX(-50%);
}

.main_col .btn_wrap li.openModal5{
    position: absolute; top: 197px; left: 341px;
    width: 142px; height: 223px;
    transform: skew(-4deg);
    /* background-color: rgba(0,122,0,0.4); */
}
.main_col .btn_wrap li.openModal5 p{
    bottom: 20px; left: 50%; 
    transform: skew(4deg) translateX(-50%);
}

.main_col .btn_wrap li.openModal6{
    position: absolute; top: 196px; left: 613px;
    width: 131px; height: 139px;
    transform: skew(0deg);
    /* background-color: rgba(0,122,0,0.4); */
}
.main_col .btn_wrap li.openModal6 p{
    bottom: 20px; left: 50%; 
    transform: skew(0deg) translateX(-50%);
}

.main_col .btn_wrap li.openModal7{
    position: absolute; top: 197px; left: 816px;
    width: 133px; height: 139px;
    transform: skew(1deg);
    /* background-color: rgba(0,122,0,0.4); */
}
.main_col .btn_wrap li.openModal7 p{
    bottom: 20px; left: 50%; 
    transform: skew(-1deg) translateX(-50%);
}






/*  */

.main_col .footer{height: 400px; background-color: #313131; overflow: hidden;}
.main_col .footer nav{width: 100%; padding-top: 30px;}
.main_col .footer ul{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-justify-content: space-between; justify-content: space-between;
}
/* .main_col .footer li{
    position: relative; 
    width: 320px; height: 200px; 
    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;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    background: url(../images/btn_maincol1.png) no-repeat;
    background-position: right center;
} */

.main_col .footer li{
    position: relative; 
    width: 320px; height: 200px; 
    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;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    background-color: #00539e;
    background-position: right center;
}
.main_col .footer li button{
    width: 100%; height: 100%; padding-left: 110px;
    font-family: 'Arita'; font-size: 50px; line-height: 60px; font-weight: 800; color: #fff;
}
.main_col .footer li:before{
    content: '';
    position: absolute; top: 45px; left: 40px;
    width: 105px; height: 105px;
    background: url(../images/icon_main01.png) no-repeat;
    background-position: 0 0;
}
.main_col .footer li:nth-of-type(2):before{background-position: -115px 0;}
.main_col .footer li:nth-of-type(3):before{background-position: -230px 0;}



/* ==================================== 종합안내도 메인 가로 main_row : main ==================================== */
.main_row{background: url(../images/bg_main_col.jpg) no-repeat center;}
.main_row .contents{width: 100%; height: 100%;}
.main_row .inner{position: relative; width: 90%; height: calc(100% - 130px);}

.main_row .header{position: absolute; left: 50%; top: 55px; transform: translateX(-50%);}
.main_row .header .logo{margin: 0 auto;}
.main_row .header .logo img{width: 100%;}
.main_row .bxarea{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 1285px; height: 710px; margin: 0 auto;
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.main_row .bx-wrapper{height: 100%; }
.main_row .bxSlider_main_col li{display: block; width: 100% !important; height: 710px; font-size:30px;}
.main_row .bxSlider_main_col .video{width: 100%; height: 100%; }
.main_row .bottom_menu{
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 130px;
    background-color: #333; font-size: 0;
    -moz-box-shadow: 0 -16px 17px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 -16px 17px rgba(0,0,0,.1);
    box-shadow: 0 -16px 17px rgba(0,0,0,.1);
}
.bottom_menu .util{
    display: inline-block;
    width: calc(100% - 1280px); height: 100%; padding: 0 50px 0 0; 
    text-align: right; letter-spacing: -1px; font-size: 0; vertical-align: top;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.bottom_menu .util > *{display: inline-block; vertical-align: middle;}
.bottom_menu .util input{text-align: right; background: transparent; }
.bottom_menu .util > p{width: calc(100% - 220px);}
.bottom_menu .util > strong{width: 220px;}
.bottom_menu .util p input{width: 100%; font-family: 'Arita'; font-size: 50px; line-height: 130px; font-weight: 100; color: #fff;}
.bottom_menu .util strong b{display: inline-block;}
.bottom_menu .util strong b input{width: 100%; height: 70px; font-family: 'Arita'; font-size: 75px; line-height: 130px; font-weight: 700; color: #fff;}

.bottom_menu nav{display: inline-block; width: 1280px;}
.bottom_menu .contents_btn{font-size: 0; text-align: center;}
.bottom_menu li{
    position: relative; display: inline-block;
    width: 320px; height: 100%;
    font-size: 40px; line-height: 130px; background-color: #00539e;
    vertical-align: top;
}
.bottom_menu li:before{
    content: '';
    position: absolute; top: 30px; left: 40px;
    width: 70px; height: 70px;
    background: url(../images/icon_main02.png)no-repeat;
}
.bottom_menu li:nth-of-type(1):before{background-position: -10px 0;}
.bottom_menu li:nth-of-type(2):before{background-position: -80px 0;}
.bottom_menu li:nth-of-type(3):before{background-position: -160px 0;}
.bottom_menu li:nth-of-type(4):before{background-position: -230px 0;}
.bottom_menu li:after{
    content: ''; position: absolute; top: 0; left: 0;
    width: 1px; height: 100%; background-color: #a9a8a8;
}
.bottom_menu li *{
    width: 100%; height: 130px; padding-left: 70px;
    font-family:'Arita'; font-size: 35px; color: #fff; font-weight: 600;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    vertical-align: top;
}
.bottom_menu li a{display: block;}
.bottom_menu .home{background-color: #333;}

.main_row .map_area{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.main_row .floor_wrap{position: absolute; top: 70px; right: 70px;}
.main_row .floor_wrap .floor_title{position: relative; display: block; margin-bottom: 50px; font-size: 120px; line-height: 150px; font-weight: 700; color: #333;}
.main_row .floor_wrap .floor_title:before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background-color: #333; border-radius: 10px;}
.main_row .floor_wrap ul{display: block;}
.main_row .floor_wrap li{width: 90px; height: 90px; margin: 0 auto; border-radius: 50%; text-align: center; font-size: 35px; line-height: 90px; font-weight: 600; color: #777; background-color: #fff; border: 1px solid #ccc;}
.main_row .floor_wrap li+li{margin-top: 25px;}
.main_row .floor_wrap li.active{background-color: #2598f1; color: #fff;}
.main_row .floor_wrap li a{display: block;}



/* ======= 가로 ======= */
.main_row .map_area ul li{
    position: absolute; height: 50px; 
    font-family:'Arita'; font-size: 25px; line-height: 52px; font-weight: 700;
    color: #3d3d3d; box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* 가로1층 */
.main_row .map_area ul.row1f li:nth-of-type(1){
    bottom: 78px; left: 168px; padding: 0 20px 0 70px;
    background: #fff url(../images/map_row_icon1.png) no-repeat 20px center;
}
.main_row .map_area ul.row1f li:nth-of-type(2){
    top: 172px; left: 624px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon2.png) no-repeat 20px center;
}
.main_row .map_area ul.row1f li:nth-of-type(3){
    left: 500px; bottom: 332px; padding: 0 20px 0 70px;
    background: #fff url(../images/map_row_icon3.png) no-repeat 20px center;
}
.main_row .map_area ul.row1f li:nth-of-type(4){
    right: 537px; bottom: 312px; padding: 0 20px 0 65px;
    background: #fff url(../images/map_row_icon4.png) no-repeat 20px center;
}
.main_row .map_area ul.row1f li:nth-of-type(5){
    right: 135px; bottom: 258px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon5.png) no-repeat 20px center;
}

/* 가로2층 */
.main_row .map_area ul.row2f li:nth-of-type(1){
    top: 260px; left: 86px; padding: 0 20px 0 50px;
    background: #fff url(../images/map_row_icon6.png) no-repeat 20px center;
}
.main_row .map_area ul.row2f li:nth-of-type(2){
    bottom: 394px; left: 361px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon3.png) no-repeat 20px center;
}
.main_row .map_area ul.row2f li:nth-of-type(3){
    left: 686px; top: 85px; padding: 0 20px 0 52px;
    background: #fff url(../images/map_row_icon5.png) no-repeat 20px center;
}
.main_row .map_area ul.row2f li:nth-of-type(4){
    right: 276px; top: 85px; padding: 0 20px 0 65px;
    background: #fff url(../images/map_row_icon7.png) no-repeat 20px center;
}
.main_row .map_area ul.row2f li:nth-of-type(5){
    right: 362px; bottom: 330px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon8.png) no-repeat 20px center;
}

/* 가로3층 */
.main_row .map_area ul.row3f li:nth-of-type(1){
    bottom: 343px; left: 286px; padding: 0 20px 0 50px;
    background: #fff url(../images/map_row_icon3.png) no-repeat 20px center;
}
.main_row .map_area ul.row3f li:nth-of-type(2){
    bottom: 343px; left: 540px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon6.png) no-repeat 20px center;
}
.main_row .map_area ul.row3f li:nth-of-type(3){
    right: 560px; top: 85px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon5.png) no-repeat 20px center;
}
.main_row .map_area ul.row3f li:nth-of-type(4){
    right: 386px; bottom: 343px; padding: 0 20px 0 65px;
    background: #fff url(../images/map_row_icon2.png) no-repeat 20px center;
}
.main_row .map_area ul.row3f li:nth-of-type(5){
    right: 200px; top: 85px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon9.png) no-repeat 20px center;
}
.main_row .map_area ul.row3f li:nth-of-type(6){
    right: 78px; bottom: 390px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon10.png) no-repeat 20px center;
}

/* 가로4층 */
.main_row .map_area ul.row4f li:nth-of-type(1){
    top: 85px; left: 84px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon11.png) no-repeat 20px center;
}
.main_row .map_area ul.row4f li:nth-of-type(2){
    bottom: 245px; left: 68px; padding: 0 20px 0 55px;
    background: #fff url(../images/map_row_icon12.png) no-repeat 20px center;
}
.main_row .map_area ul.row4f li:nth-of-type(3){
    left: 620px; bottom: 396px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon13.png) no-repeat 20px center;
}
.main_row .map_area ul.row4f li:nth-of-type(4){
    right: 560px; top: 85px; padding: 0 20px 0 60px;
    background: #fff url(../images/map_row_icon5.png) no-repeat 20px center;
}
.main_row .map_area ul.row4f li:nth-of-type(5){
    right: 333px; top: 85px; padding: 0 20px 0 67px;
    background: #fff url(../images/map_row_icon9.png) no-repeat 20px center;
}





/* ======= 세로 ======= */
.main_col .map_area ul li{
    position: absolute; height: 35px; 
    font-family:'Arita'; font-size: 18px; line-height: 35px; font-weight: 700;
    color: #3d3d3d; box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
/* 세로1층 */
.main_col .map_area ul.col1f li:nth-of-type(1){
    bottom: 54px; left: 117px; padding: 0 15px 0 45px;
    background: #fff url(../images/map_row_icon1.png) no-repeat 13px center;
    background-size: 15% auto;
}
.main_col .map_area ul.col1f li:nth-of-type(2){
    top: 107px; left: 380px; padding: 0 15px 0 40px;
    background: #fff url(../images/map_row_icon2.png) no-repeat 13px center;
    background-size: 17% auto;
}
.main_col .map_area ul.col1f li:nth-of-type(3){
    left: 300px; bottom: 200px; padding: 0 15px 0 45px;
    background: #fff url(../images/map_row_icon3.png) no-repeat 13px center;
    background-size: 9% auto;
}
.main_col .map_area ul.col1f li:nth-of-type(4){
    right: 308px; bottom: 200px; padding: 0 15px 0 45px;
    background: #fff url(../images/map_row_icon4.png) no-repeat 13px center;
    background-size: 12% auto;
}
.main_col .map_area ul.col1f li:nth-of-type(5){
    right: 74px; bottom: 165px; padding: 0 15px 0 41px;
    background: #fff url(../images/map_row_icon5.png) no-repeat 13px center;
    background-size: 10% auto;
}


/* 세로2층 */
.main_col .map_area ul.col2f li:nth-of-type(1){
    top: 179px; left: 48px; padding: 0 15px 0 40px;
    background: #fff url(../images/map_row_icon6.png) no-repeat 13px center;
    background-size: 10% auto;
}
.main_col .map_area ul.col2f li:nth-of-type(2){
    bottom: 177px; left: 245px; padding: 0 15px 0 45px;
    background: #fff url(../images/map_row_icon3.png) no-repeat 13px center;
    background-size: 15% auto;
}
.main_col .map_area ul.col2f li:nth-of-type(3){
    left: 457px; top: 57px; padding: 0 15px 0 40px;
    background: #fff url(../images/map_row_icon5.png) no-repeat 13px center;
    background-size: 10% auto;
}
.main_col .map_area ul.col2f li:nth-of-type(4){
    right: 220px; top: 68px; padding: 0 15px 0 40px;
    background: #fff url(../images/map_row_icon7.png) no-repeat 13px center;
    background-size: 14% auto;
}
.main_col .map_area ul.col2f li:nth-of-type(5){
    right: 288px; bottom: 140px; padding: 0 15px 0 40px;
    background: #fff url(../images/map_row_icon8.png) no-repeat 13px center;
    background-size: 12% auto;
}


/* 세로3층 */
.main_col .map_area ul.col3f li:nth-of-type(1){
    bottom: 140px; left: 185px; padding: 0 15px 0 45px;
    background: #fff url(../images/map_row_icon3.png) no-repeat 13px center;
    background-size: 15% auto;
}
.main_col .map_area ul.col3f li:nth-of-type(2){
    bottom: 140px; left: 393px; padding: 0 15px 0 40px;
    background: #fff url(../images/map_row_icon6.png) no-repeat 13px center;
    background-size: 11% auto;
}
.main_col .map_area ul.col3f li:nth-of-type(3){
    right: 432px; top: 55px; padding: 0 15px 0 45px;
    background: #fff url(../images/map_row_icon5.png) no-repeat 13px center;
    background-size: 13% auto;
}
.main_col .map_area ul.col3f li:nth-of-type(4){
    right: 305px; bottom: 140px; padding: 0 15px 0 40px;
    background: #fff url(../images/map_row_icon2.png) no-repeat 13px center;
    background-size: 16% auto;
}
.main_col .map_area ul.col3f li:nth-of-type(5){
    right: 172px; top: 55px; padding: 0 15px 0 41px;
    background: #fff url(../images/map_row_icon9.png) no-repeat 13px center;
    background-size: 16% auto;
}
.main_col .map_area ul.col3f li:nth-of-type(6){
    right: 97px; bottom: 176px; padding: 0 15px 0 40px;
    background: #fff url(../images/map_row_icon10.png) no-repeat 13px center;
    background-size: 13% auto;
}

/* 세로4층 */
.main_col .map_area ul.col4f li:nth-of-type(1){
    top: 55px; left: 55px; padding: 0 15px 0 41px;
    background: #fff url(../images/map_row_icon11.png) no-repeat 13px center;
    background-size: 11% auto;
}
.main_col .map_area ul.col4f li:nth-of-type(2){
    bottom:64px; left: 36px; padding: 0 15px 0 39px;
    background: #fff url(../images/map_row_icon12.png) no-repeat 13px center;
    background-size: 9% auto;
}
.main_col .map_area ul.col4f li:nth-of-type(3){
    left: 420px; bottom: 177px; padding: 0 15px 0 41px;
    background: #fff url(../images/map_row_icon13.png) no-repeat 13px center;
    background-size: 13% auto;
}
.main_col .map_area ul.col4f li:nth-of-type(4){
    right: 432px; top: 55px; padding: 0 15px 0 39px;
    background: #fff url(../images/map_row_icon5.png) no-repeat 13px center;
    background-size: 12% auto;
}
.main_col .map_area ul.col4f li:nth-of-type(5){
    right: 273px; top: 55px; padding: 0 15px 0 40px;
    background: #fff url(../images/map_row_icon9.png) no-repeat 13px center;
    background-size: 16% auto;
}








/* ==================================== modal ==================================== */
/* modal style3 : 부서검색, 직원검색 */

.dep-searchresult{display: none; width: 78%;}
.stf-searchresult{display: none;}

/* 세로 */
.col .dep-searchresult{display: none; width: 96%;}
.col .group > ul li{width: 16%;}
.col .group > ul li .boxg{width: 95%;}

.col .boxg .group_img,
.col .group7.team > .boxg_section1 .boxg .group_img {width: 50px; height: 50px;}
.col .group7 .boxg .group_img{width: 40px; height: 50px;}
.col .boxg .boxg_wrap,
.col .group7.team .boxg .boxg_wrap{padding: 10px 10px 0 10px; height: 72px;}
.col .group7 .boxg .boxg_wrap{padding: 10px 8px 0 8px; height: 72px;}
.col .group7 .boxg .group_cont{width: calc(100% - 43px);}
.col .boxg .group_cont,
.col .group7.team > .boxg_section1 .boxg .group_cont{width: calc(100% - 60px);}
.col .boxg .group_tit{font-size: 13px;line-height: 1;}
.col .boxg .group_onf em{display: block; font-size: 14px; line-height: 1.4;}
.col .group_first .boxg{width: 200px;}
.col .group_first .boxg .group_head{font-size: 18px;}
.col .group_first .boxg .group_desc{font-size: 13px;}
.col .boxg .group_head{height: 30px; font-size: 15px; line-height: 30px;}
.col .teamnone .boxg_section1{height: 102px;}









/* 공통 */
.modal-s3 .modal-content{
    width: 100%; background-color: #f5f5f5;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.modal-s3 .modal-head{font-size: 0; padding: 30px;}
.modal-s3 .modal-head button{
    width: 350px; height: 120px;
    font-size: 50px; line-height: 120px; font-weight: 600;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    border-radius: 15px; vertical-align: top;
}
.modal-s3 .modal-head button+button{margin-left: 20px;}
.modal-s3 .modal-head .btn-voc{
    width: 120px;
    background: #aaa url(../images/btn_voc.png) no-repeat center;
    font-size: 0;
}
.modal-s3 .modal-head .btn-voc.active{
    background: #0062bc url(../images/btn_voc.png) no-repeat center;
}


.modal-s3 .modal-search .modal-inner{position: relative; padding: 0 30px 30px 30px;}
.modal-s3 input[type='text'].btn_searchword{
    position: relative; z-index: 1;
    width: 900px; padding: 0 45px;
    font-size: 60px; line-height: 120px; font-weight: 600; color: #333;
    background-color: #fff;
    border: 3px solid #ddd; border-radius: 15px;
}
.modal-s3 input[type='text'].btn_searchword::placeholder{font-weight: 400;}


.modal-s3 .modal-searchlist{
    position: relative; top: -3px;
    height: 505px; overflow-y: scroll;-ms-overflow-style: none; scrollbar-width: none;
    padding: 10px; 
    background-color: #fff;
    border: 3px solid #ddd; border-radius: 15px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    box-shadow: 0 0 12px rgba(0,0,0,0.15);
}
.modal-s3 .modal-searchlist::-webkit-scrollbar {display: none;}
.modal-s3 .modal-searchlist p{
    padding: 0 35px;  height: 80px; font-size: 60px; line-height: 80px; color: #333;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    border-radius: 15px;
}
.modal-s3 .modal-searchlist p:hover{color: #045097; background-color: #e1f1ff;}
.modal-s3 .control{height: 505px; bottom: 30px; right: 50px;}


/* 검색결과에서 공통 하단 버튼 */
.modal-s3 .modal-move{height: 80px; text-align: center; font-size: 0;}
.modal-s3 .modal-move a{display: inline-block; padding: 0 25px; font-size: 50px; line-height: 80px; border-radius: 25px; color: #fff;}
.modal-s3 .modal-move a+a{margin-left: 20px;}


/* 부서검색 버튼 */
.modal-s3.modal-dep .btn-dep{background-color: #43a5fd; border: 3px solid #43a5fd; color: #fff;}
.modal-s3.modal-dep .btn-stf{background-color: #ffffff; border: 3px solid #43a5fd; color: #43a5fd;}
/* 부서검색 검색결과 : dep-searchresult */
.modal-s3 .dep-searchresult .modal-move{
    position: relative; z-index: 0;
    padding: 20px 0; background-color: #fff; box-shadow: 0 -5px 10px rgba(0,0,0,0.1);
    border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;
}

.modal-s3 .dep-searchresult .modal-head{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    border-top-right-radius: 20px; border-top-left-radius: 20px;
    height: 110px; padding: 0 35px; text-align: center; font-weight: 700;
    color: #fff; background-color: #3c9ffa;
}
.modal-s3 .dep-searchresult .modal-head b{font-size: 60px; line-height: 1;}
.modal-s3 .dep-searchresult .modal-head b:nth-of-type(2){font-size: 45px;}


/* 본부장실 */
.group_director .boxg_section1:before{display:none;}

/* 가로 - 부서검색 */
.row .boxg_section1:before{left: auto; transform: translateX(0);}
.row .dep-searchresult .group2 > ul li{width: 35%;}
.row .dep-searchresult .group3 > ul li{width: 31%;}
.row .dep-searchresult .group4 > ul li{width: 23%;}
.row .dep-searchresult .group5 > ul li{width: 19%;}
.row .dep-searchresult .group6 > ul li{width: 16.3%;}

/* 세로 - 부서검색 */
.col .boxg_section1:before{left: auto; transform: translateX(0);}
.col .dep-searchresult .group2 > ul li{width: 23%;}
.col .dep-searchresult .group3 > ul li{width: 23%;}
.col .dep-searchresult .group4 > ul li{width: 23%;}
.col .dep-searchresult .group5 > ul li{width: 19%;}
.col .dep-searchresult .group6 > ul li{width: 16.3%;}





/* 직원검색 버튼 */
.modal-s3.modal-stf .btn-dep{background-color: #ffffff; border: 3px solid #43a5fd; color: #43a5fd;}
.modal-s3.modal-stf .btn-stf{background-color: #43a5fd; border: 3px solid #43a5fd; color: #fff;}
/* 직원검색 검색결과 : stf-searchresult */
.stf-searchresult .modal-inner{padding:30px; }
.stf-searchresult .modal-head{
    position: relative; height: 110px; padding: 0 50px;
    font-size: 60px; line-height: 110px; font-weight: 700; color: #fff;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    border-top-left-radius: 30px; border-top-right-radius: 30px;
}
.stf-searchresult .modal-head button{
    position: absolute; top: 20px; right: 30px;
    width: auto; height: 70px; padding: 0 30px 0 90px;
    font-size: 35px; line-height: 70px; border: 2px solid #fff; color: #fff;
    background: url(../images/btn_search01.png) no-repeat; background-position: 27px center;
}

.stf-searchresult .modal-content{width: 1130px;}
.stf-searchresult .modal-profile{padding: 50px 60px; background-color: #fff; border-radius: 30px;}

.modal-s3.modal-off{font-size: 100px}
.modal-s3.modal-off .modal-content{width: 800px; height: 500px;}
.modal-s3 .dep-searchresult .group{height: 730px;}
.modal-s3 .dep-searchresult .control{bottom: 25px; width: 200px; height: 70px; }
.modal-s3 .dep-searchresult .control > div.control-prev{top: 0; right: 85px;}
.modal-s3 .dep-searchresult .control > div.control-next{top: 0;}


/*.modal-s4 */
.modal-s4 .modal-content{width: 700px; font-family: 'Arita';}
.modal-s4 .modal-head{
    border-top-right-radius: 20px; border-top-left-radius: 20px;
    background-color: #3c9ffa;
}
.modal-s4 .modal-head b{
    display: block; height: 70px;
    font-size: 40px; line-height: 70px;
    font-weight: 600; text-align: center; color: #fff; 
}
.modal-s4 .modal-inner{padding: 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 0;}
.modal-s4 .modal-tit{
    display: inline-block; width: 130px; height: 50px; margin-right: 20px;
    font-size: 25px; line-height: 50px; text-align: center;
    background-color: #e4f0ff; border-radius: 10px; color: #505f7a;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.modal-s4 .modal-desc{
    float: right;display: inline-block; width: calc(100% - 150px); 
    font-size: 28px; line-height: 50px; font-weight: 600;
    vertical-align: top;
}
.modal-s4 .modal-item1 li:after{content: ''; display: block; clear: both;}
.modal-s4 .modal-item1 li .modal-desc em{
    display: -webkit-box; height: 185px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 600;
}
.modal-s4 .modal-item1 li+li{margin-top: 15px;}
.modal-s4 .modal-item2{display: block; width: 100%; padding: 10px; background-color: #f1f1f1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 10px;}
.modal-s4 .modal-item2 li{display: inline-block; width: calc((100% - 20px) / 3); height: 150px; background-color: #fff; border-radius: 10px; overflow: hidden;}
.modal-s4 .modal-item2 li+li{margin-left: 10px;}
.modal-s4 .modal-item2 li img{width: 100%; height: 100%;}
.modal-s4 ul+ul{margin-top: 25px;}
.modal-s4.modal .close{top: -20px; right: -20px; width: 60px; height: 60px;}
.modal-s4.modal .close:before{width: 40px; height: 7px; }
.modal-s4.modal .close:after{width: 40px; height: 7px;}

.row .teamnone .boxg_section1{height: 120px;}




/* ==================================== 가상키보드 ==================================== */
.keyboard{
    display: none;
    position: absolute; bottom: 0; right: 0; left: 0; z-index: 10;
    width: 100%; height: 400px;
    background-color: #333; font-size: 100px;
}
.keyboard > div{margin: 0 auto; width: 1220px; height: 100%; border: 1px solid yellow;}