@charset "utf-8";
/********************
메인페이지 및 서브페이지 동시 적용.
가장 마지막에 불러오는 CSS 파일입니다.
※ 공통영역 CSS에서 부분별 개별 적용시 사용하시면 됩니다. 
********************/ 

/* history */
.history {position: relative;padding-bottom:0}
.history .inner {display: flex;padding-bottom: 0;}
.history .his-tab-wrap {margin-right: 150px;position: relative;background: #ccc;position: sticky;height: 100vh;top: 130px;}
.history .his-tab-wrap:before {content:'';position:absolute;top: 0;left: -100%;width: 200%;height: 100%;background: url(../images/sub/history-year.jpg) center no-repeat;background-size: cover;filter: brightness(0.7);}
.history .his-tab {display: flex;flex-direction: column;position: sticky;height: 480px;top: 230px;padding-top: 80px;}
.history .his-tab:after {content:'';position:absolute;left: 0;border-right: 1px solid #ffffff;top: 105px;height: 100vh;z-index: 0;}
.history .his-tab li {text-align: center;position: relative;margin-bottom: 20px;}
.history .his-tab li:before {content:'';position:absolute;top: 50%;left: -3px;transform: translateY(-50%);width: 7px;height: 7px;border-radius: 50px;background: #ffffff;z-index: 1;}
.history .his-tab li a {padding: 15px 35px 15px 25px;font-size: 23px;font-weight: 600;transition: 0.3s;line-height: 1;text-align: left;color: #fff;border-radius: 50px;border-top-left-radius: 0;border-bottom-left-radius: 0;width: 205px;}
.history .his-tab li a:hover {color: var(--maincolor);transition: 0.3s;}
.history .his-tab li.on {/* background: var(--maincolor);*/}
.history .his-tab li.on:before {background: var(--maincolor);right: 0;}
.history .his-tab li.on a {background: #fff;font-weight: 700;color: var(--maincolor);}
.history .cont {display: flex;margin-bottom: 50px;padding-top: 50px;}
.history .cont .year {font-size: 65px;font-weight: 900;margin-right: 150px;position: sticky;height: 70px;top: 10px;}
.history .cont .sec {position: relative;margin-top: 10px;}
.history .cont .sec dl:after {content:'';position:absolute;border-left: 1px solid #ffe8da;top: 20px;left: 0;height: 100%;z-index: -1;}
.history .cont .sec dl {padding-bottom: 50px;padding-left: 50px;position: relative;z-index: 0;opacity: 0.2;transition: 0.5s;}
.history .cont .sec dl:before {content:''; position:absolute; }
.history .cont .sec dl dt {font-size: 35px;font-weight: 800;margin-bottom: 20px;position: relative;line-height: 1; }
.history .cont .sec dl dt:before {content:'';position:absolute;width: 10px;height: 10px;border-radius: 50px;background: #ff8a40; top: 13px;left: -55px;}
.history .cont .sec dl dd {font-size: 22px;margin-left: 3px;word-break: keep-all; margin-bottom:5px}
.history .cont .sec dl dd img {margin-top:10px; max-width:100%; border-radius:15px;}
.history .cont .sec dl dd ul {margin-top: 8px;margin-left: 13px;}
.history .cont .sec dl dd ul li {font-size:18px;margin-bottom:5px;color: #8b8b8b; }


.history .cont .sec dl.on {opacity:1;transition: 0.5s;}
.history .cont .sec dl.on:before {opacity:0;transition: 0.3s}


@media (max-width: 1500px) {

  .history .cont .year {font-size: 55px; font-weight: 900; margin-right: 90px;}

} 
@media (max-width: 1300px) {

  .history .his-tab-wrap {display:none} 
  .history .his-cont {width:100%} 

}
@media (max-width: 1024px) {

  .history .his-tab {margin-bottom: 50px !important;} 
  .history .cont {padding-top:0;} 
  .history .cont .year {top:0;margin-right: 50px;font-weight: 800;}

}
@media (max-width: 768px) {

  .history .cont .year {margin-right: 40px;font-size: 40px;}
  .history .cont .sec {margin-top: 15px;}
  .history .cont .sec dl {padding-left: 30px;padding-bottom: 45px;}
  .history .cont .sec dl dt {font-size: 25px;margin-bottom: 13px;}
  .history .cont .sec dl dt:before {left: -35px;top: 8px;}
  .history .cont .sec dl dd {font-size: 19px;line-height: 1.1;}
  .history .cont .sec dl dd ul {margin-left:3px;}
  .history .cont .sec dl dd ul li {padding-left:15px}

}
@media (max-width: 550px) { 

  .history .cont {flex-direction:column;}
  .history .cont .year {margin-right:0}
  .history .cont .sec {margin-left:25px}

}




/*2026.02.10 추가*/


/*통합홈페이지 팝업 반응형*/ 
.PZwindow {display:flex; flex-direction:column}
.PZwindow iframe {height: 100%;width:100%}
.PZwindow .PZwrap img {width:100%; height: 100%;}
.PZwindow .PZwrap a {display: block; background: #333;}

@media only screen and (max-width:768px){
  .PZwindow {width: 80% !important; top:0 !important; left:0 !important}
  .PZwindow .PZwrap {width: 100% !important; height: auto !important;}
}

@media only screen and (max-width:550px){
  .PZwindow {width: 100% !important}
}



.eQ01 .wrap-sub-visual {background-image: url(/sites/inmun/images/sub//sub-visual01.jpg);}
.eQ02 .wrap-sub-visual {background-image: url(/sites/inmun/images/sub/sub-visual02.jpg);}
.eQ03 .wrap-sub-visual {background-image: url(/sites/inmun/images/sub/sub-visual03.jpg);}
.eQ04 .wrap-sub-visual {background-image: url(/sites/inmun/images/sub/sub-visual04.jpg);}
.eQ05 .wrap-sub-visual {background-image: url(/sites/inmun/images/sub/sub-visual05.jpg);}
.eQ06 .wrap-sub-visual {background-image: url(/sites/inmun/images/sub/sub-visual06.jpg);}
.eQ07 .wrap-sub-visual {background-image: url(/sites/inmun/images/sub/sub-visual07.jpg);}
.eQ08 .wrap-sub-visual {background-image: url(/sites/inmun/images/sub/sub-visual08.jpg);}

/* depth4 스타일 변경 */
.wrap-contents .tab .ul_4 {border-top:0; display: flex; gap: 8px; flex-wrap: wrap;}
.wrap-contents .tab .ul_4 li {width: calc(25% - 6px) !important;}
.wrap-contents .tab .ul_4 li a {background-color: #f1f3f5; border-radius: 6px; border: 1px solid #ddd; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;}
.wrap-contents .tab .ul_4 li a:hover {background-color: #fff; border: 2px solid #093f6e; color:#093f6e;}

.wrap-contents .tab .ul_4 li._active a {background-color: #fff; border: 2px solid #093f6e; color:#093f6e; font-weight: bold;}
.wrap-contents .tab .ul_4 li._active {background: none !important;}

@media(max-width: 860px) {
  .wrap-contents .tab .ul_4 li {width: calc(33.333% - 5.333px) !important;}
}
@media(max-width: 600px) {
  .wrap-contents .tab .ul_4 li {width: calc(50% - 4px) !important;}
}
@media(max-width: 420px) {
  .wrap-contents .tab .ul_4 {opacity: 1; max-height: unset; position: static; gap: 6px;}
  .wrap-contents .tab .ul_4 li {width: 100% !important;}
  .wrap-contents .tab .ul_4 li a {font-size: 16px; hegiht: 48px; line-height: 48px;}

  .wrap-contents .tab .tab_div > a:first-child {font-family:'Noto Medium';display:block;background:url('../../images/common/arrow_tab4.jpg') no-repeat right center;width:100%;font-size:18px;height:55px;line-height: 50px;padding:0 0 0 20px;color: #183d93;border:2px solid #183d93;}
  .wrap-contents .tab .tab_div > a:not(:first-child) {display:none;}
  .wrap-contents .tab ul {top: 55px;}
  .wrap-contents .tab ul li._active a {color: #183d93; font-weight: bold;}
}


/* ----- 20260225 수정 ----- */
.wrap-header.fNav .top-header {display:none;}
.wrap-contents * { font-family: 'Gmarket Medium' !important;}

.wrap-visual {margin-top: 80px;}
.wrap-contents .con-list2 > li {position:relative;padding: 1px 0 1px 17px !important;color:#666;}
.wrap-header .top-header .inner {align-items: center;}
.wrap-header .head-logo a img {height: 60px; max-width:400px;}
.wrap-header .top-header {border-bottom: 1px solid #ffffff73; background: #fff; padding: 10px 0 !important;}

.wrap-header .head-navi .ul_1 {margin-right: 30px;}
.wrap-header .head-navi .ul_2 {padding: 0;}
.wrap-header .head-navi .a_2 {font-size: 17px; padding: 12px 10px;}
.wrap-header .head-navi .a_2[target=_blank] span:before {left: auto; right: -20px}

@media (max-width: 1200px) {
  .wrap-header .head-navi .a_1 {font-size: 16px;}
  .wrap-header .head-navi .a_2 {font-size: 15px;}
}
@media (max-width: 1024px) {
  .wrap-header.fNav .top-header {display: block;}
  .wrap-visual {margin-top: 0;}

  .wrap-header .top-header {padding: 0 !important;}
  .wrap-header .sub-header {height: 70px;}
  .wrap-header .head-logo {top: 50px; left: 10px;}
  .wrap-header .head-logo a img {height: 50px;}
  .wrap-header .head-util {width: 70px; height: 70px; top: 40px;}
  .wrap-header .head-util li.btn-mgnb {width: 35px; height: 35px; top: 18px;  right: -18px;}

  .wrap-header .head-navi .ul_1 {flex-direction: column;}
  .wrap-header .head-navi .div_1 {padding-top: 20px;}
  .wrap-header .head-navi .div_2.on {top: 20px;}
  .wrap-header .head-navi .a_2 {font-size: 16px; padding: 12px 15px;}
  .wrap-header .head-navi .a_2[target=_blank] span:before {top: -4px;}
}
@media (max-width: 768px) {
  .wrap-header .sub-header {height: 69px;}

  .wrap-header .head-navi .div_2 {width: 60% !important;}
  .wrap-header .head-navi .a_1 {padding: 15px 0 15px 10px;}
}
@media (max-width: 550px) {
  .wrap-header .head-logo {top: 44px; left: 10px;}
  .wrap-header .head-logo a img {height: 38px;}

  .wrap-header .head-util {top: 30px; height: calc(100% - 30px;)}

  .wrap-header .head-navi .header-navi-box {width: calc(100% - 30px);}
  .wrap-header .head-navi .div_2 {width: 50% !important;}
}

/* 서브 */
.wrap-sub-visual .slogan {margin-top: 100px;}
.wrap-sub-navi {z-index: 10;}
.wrap-sub-navi .sub-util {right: 10px;}
.wrap-sub-navi .sub-navi .navUl {max-height: 400px;}

@media (max-width: 1280px)  {
  .wrap-sub-visual {margin-top: 0;}
}
@media (max-width: 1200px)  {
  .wrap-sub-visual .slogan {margin-top: 90px;}
}
@media (max-width: 1024px) {
  .wrap-sub-visual .slogan {margin-top: 0;}
}