@charset "UTF-8";

/*-------------------------------------------------
Content Style Sheet (Floor - GM)
Version : 1.0
Author :
Last update : 2024. 04. 23.
-------------------------------------------------*/

/* 층별안내 */
.floor_guide_wrap { overflow: hidden; position: relative; width: 100%; background-color: #f0f3f9; box-sizing: border-box; } 

.floor_guide_wrap .floor_container_wrapper { display: flex; overflow:hidden; position:relative; width: 100%; background: #f0f3f9; max-width: 1890px; min-height:100%; }
.floor_guide_wrap .floor_contents_wrapper { display: flex; width:100%; background: transparent; box-sizing: border-box; align-items: stretch; }

/* 층별리스트 */
.floor_left_list { width: 40%; min-width: 600px; height: 100%; background-color: #f7f7f7; }

.tt_wrap { display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 20px; position: relative; padding: 16px 10%;  min-width: 400px; box-sizing: border-box; }
.tt_wrap .h1_logo { width: auto; }
.tt_wrap .h1_logo img { width:100%; }
.tt_wrap > h2 { line-height: 1; font-size: 50px; font-weight: bold; }
.tt_wrap > h2 > span { font-size: 28px; color: #30c8cd; }
.pc_floor_top { padding:0 10%; box-sizing: border-box; }
.m_floor_top { display:none; }
.info_wrap1 { width:100%; padding-top: 30px; min-height:100px; box-sizing: border-box; }

.floor_list { display: flex; letter-spacing: -0.25px; font-family:'Noto Sans Korean',sans-serif; font-size:16px; line-height: 1.5; border-top:1px solid #d9d9d9; box-sizing: border-box; }
.floor_list dt { width: 100px; text-align:center; font-weight:600; }
.floor_list dt  a { display: flex; height: 100%; color: #222; justify-content: center; align-items: center; }
.floor_list dt  a  em { display: block; padding:10px 0; box-sizing: border-box;  }
.floor_list dd { width:calc(100% - 100px); padding: 10px 20px; color: #222; font-weight: 500; border-left:1px solid #d9d9d9; word-break: keep-all; box-sizing: border-box; }

.floor_guide_wrap .info_wrap1 .floor_list:last-of-type { border-bottom:1px solid #d9d9d9; } 
.floor_guide_wrap [class^="info_wrap"] .floor_list a { color:#000; }
.floor_guide_wrap [class^="info_wrap"] .floor_list dt a:hover,
.floor_guide_wrap [class^="info_wrap"] .floor_list dt a.on,
.floor_guide_wrap [class^="info_wrap"] .floor_list dd a:hover,
.floor_guide_wrap [class^="info_wrap"] .floor_list dd a.on { color:#12e7ea; text-decoration:underline; font-weight:500; }


.floor_guide_wrap .floor_list:hover a { color:#fff; transition: all 0.1s; }
.floor_guide_wrap .floor_list:hover dt, 
.floor_guide_wrap .floor_list:hover dd { background:#0067be;  border-left-color: #0067be; transition: all 0.1s; color: #fff; }

/* .floor_guide_wrap .floor_list.on a { color:#fff; transition: all 0.1s; }
.floor_guide_wrap .floor_list.on dt,
.floor_guide_wrap .floor_list.on dd { background:#0067be; color:#fff; border-left:1px solid #0067be; transition: all 0.1s; } */

/* 층별이미지 */
.floor_right_box { width: 60%; padding: 100px 30px 0; background: #f0f3f9; box-sizing: border-box; }

.floor_right_list_box { display: flex; position: relative; max-width: 1000px; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; }
.right_img_list { width: 100%; height: 100%; max-width: 1000px; align-items: center; justify-content: center; padding: 20px 0; box-sizing: border-box; }
.right_img_list > li:first-of-type  { display: block; }
.right_img_list > li { display: none; position:relative; }
.right_img_list > li img { width:100%; }
.right_img_list .pin { display: block; position:absolute; top:-999px; left:-999px; width:26px; height:40px; margin-top: -10px; background:url(/common/front/home/images/floor_guide/floor_marker_2026.png) no-repeat center center; animation: marker 1s alternate ease-in-out infinite; }
.right_img_list .pin02{ display: block; position:absolute; top:-999px; left:-999px; width:26px; height:40px; margin-top: -10px; background:url(/common/front/home/images/floor_guide/floor_marker_2026.png) no-repeat center center; animation: marker 1s alternate ease-in-out infinite; }
.on_tit { position: absolute; top: -35px; left: 0; font-size: 30px; display: block; }
.on_tit::before { position: absolute;  content: ''; display: block; position: absolute; width: 100%; height: 30px; background: url(/common/front/home/images/floor_guide/img_floor_tit_bg.png) no-repeat center / contain; top: 35px; }
.on_da_tit { display: none; }

/* 광명 없는층수 클릭막기 */
#f14 a,#f8 a,#b3f a { pointer-events: none; }

@keyframes marker {
    0% {
        transform:translateY(-5px);
    }
    100% {
        transform:translateY(0);
    }
}

/* 범례 */
.legend_box { border: 1px solid #cccfd7; }
.legend_list { display: flex; padding: 20px; flex-wrap: wrap; gap: 15px; box-sizing: border-box; justify-content: center; }
.legend_list > li {display: flex; letter-spacing:-0.25px; align-items: center; font-size: 16px; font-weight:400; gap: 0 15px; width: 150px; }

@media(max-width:1680px){
    .tt_wrap { padding: 20px 3%; }
    .floor_left_list { min-width: 565px;}
    .pc_floor_top{padding:0 3%;}
}

@media(max-width: 1600px){
    .floor_right_box { padding-top: 150px; }
    .right_img_list .pin { height: 35px; background-size: contain; }
}

@media(max-width: 1450px) {
    .right_img_list .pin { height: 26px; }
}

@media(max-width : 1300px){
.floor_guide_wrap .container_wrapper{ overflow:visible; z-index:2; background:#062c51;min-width: auto;}
.floor_guide_wrap .container_wrapper:before{content:none;}
.floor_guide_wrap .contents_wrapper .info_wrap1 dl:after{ left: 38%;background-size: 100% auto !important;}
.floor_guide_wrap .contents_wrapper .info_wrap1 dl:hover:after{background-size: 100% auto !important;}
.floor_guide_wrap .contents_wrapper .info_wrap1_1 dl:after{background-size:100% auto !important;}

.floor_guide_wrap .contents_wrapper .info_wrap1 dl dd{width: 30%; max-width: auto; min-width: auto;}
.floor_guide_wrap .contents_wrapper .info_wrap1_1 dl dd{width: 30%; max-width: auto; min-width: auto;}
}

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

.floor_guide_wrap .container_wrapper .contents_wrapper{display: none;}
.floor_guide_wrap .container_wrapper:after{width: 100%; height: 20%; max-width: none; min-height: 260px; }

.tt_wrap{display:none;}
.pc_floor_top{display:none;}
.m_floor_top{display: block;position: relative;padding: 20px;box-sizing: border-box;margin-top:0;}
.m_floor_top .h1_logo{width:40%;margin-bottom: 20px;}
.floor_guide_wrap .floor_contents_wrapper{flex-direction:column;}
.floor_left_list{width:100%;height: auto;min-width: auto;}
.floor_right_box{width:100%;padding: 60px 20px;text-align: center;}
.right_img_list{min-height:auto; max-width: unset; }
.floor_right_list_box{box-sizing: border-box; max-width: unset; }

.m_floor_top .select_box{}
.m_floor_top .select_box select{display: block;width: 100%;height: 45px;padding: 5px 20px;border: 0;border: 1px solid #dbdbdb;background: #fff url(/common/front/home/images/icon/ico_select_down01.png) no-repeat calc(100% - 20px) 50%;color: #000;margin-top: 5px;font-size: 20px;line-height: 1;box-sizing: border-box;font-family: 'SpoqaHanSansNeo';font-weight: 500;background-size: 11px 6px;}
.m_floor_top .select_box select:nth-of-type(1){margin-top:0;}

.floor_img_wrap{padding: 20px;}
.floor_list_con{height: calc(100vh - 28px);margin-top:0;padding-bottom: 0;}
.floor_list_con > li:nth-of-type(1){top: 0px;}
.floor_list_con > li:nth-of-type(2){top: 40px;}
.floor_list_con > li:nth-of-type(3){top: 80px;}
.floor_list_con > li:nth-of-type(4){top: 120px;}
.floor_list_con > li:nth-of-type(5){top: 160px;}
.floor_list_con > li:nth-of-type(6){top: 200px;}
.floor_list_con > li:nth-of-type(7){top: 240px;}
.floor_list_con > li:nth-of-type(8){top: 280px;}
.floor_list_con > li:nth-of-type(9){top: 320px;}
.floor_list_con > li:nth-of-type(10){top: 360px;}
.floor_list_con > li:nth-of-type(11){top: 400px;}

.floor_right_info{display: table;width: 100%;padding: 28px 83px;border: 1px solid #385674;box-sizing: border-box;margin-top: 70px;}
.floor_right_info > li:nth-of-type(1),
.floor_right_info > li:nth-of-type(2),
.floor_right_info > li:nth-of-type(3),
.floor_right_info > li:nth-of-type(4),
.floor_right_info > li:nth-of-type(5){margin-top: 0;}
.floor_right_info > li{display: table-cell;float: left;width: calc(100% / 5);color: #000;letter-spacing: 0;margin-top: 23px;font-size: 17px;font-weight: 300;line-height: 27px;}
.floor_right_info > li > span{display: inline-block;position: relative;padding-left: 40px;}
.floor_right_info > li > span:before{display: block;position: absolute;top: 50%;left: 0;width: 27px;height: 27px;content: '';transform: translateY(-50%);}
.floor_right_info > li.ico01 > span:before{background: url(/common/front/home/images/floor_guide/tip_information.png) no-repeat;}
.floor_right_info > li.ico02 > span:before{background: url(/common/front/home/images/floor_guide/tip_stairs.png) no-repeat;}

.floor_right_info > li.ico04 > span:before{background: url(/common/front/home/images/floor_guide/tip_escalator.png) no-repeat;}
.floor_right_info > li.ico05 > span:before{background: url(/common/front/home/images/floor_guide/tip_elevator.png )no-repeat;}
.floor_right_info > li.ico06 > span:before{background: url(/common/front/home/images/floor_guide/tip_toilet.png) no-repeat;}

.right_img_list .pin { height: 40px; }
.on_tit { left: 10px; }
.on_tit::before { display: none; }
}

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

.floor_right_info{padding: 25px 20px;}
.floor_right_info > li:nth-of-type(4),
.floor_right_info > li:nth-of-type(5){margin-top: 15px;}
.floor_right_info > li{float: left;width: calc(100% / 3);margin-top: 15px;font-size: 16px;}
.floor_right_info > li > span{padding-left: 35px;}
.floor_right_img{display: block;overflow: auto;padding: 130px 0 50px 0;margin: 0 auto;}

.floor_right_tit > span{font-size: 48px;}
.floor_right_tit > em{font-size: 28px;}
.floor_right_tit > em:before{bottom: -42px;}

.on_tit { font-size: 20px; }

}



@media (max-width: 640px){

.right_img_list .pin{width: 12px;}
.m_floor_top .select_box select{font-size:16px;}
.legend_list{ padding:12px 20px; }
.legend_list i { width:16px; }
.legend_list > li { font-size: 14px; gap: 0 10px; width: auto; } 

.floor_right_info > li{width: 50%; font-size: 12px;}
.floor_right_info > li:nth-of-type(1),
.floor_right_info > li:nth-of-type(2),
.floor_right_info > li:nth-of-type(3),
.floor_right_info > li:nth-of-type(4),
.floor_right_info > li:nth-of-type(5){margin-top: 15px;}
}