@charset "UTF-8";

.tbl th:first-child,
.tbl td:first-child{border-left:0;}
.tbl th:last-child,
.tbl td:last-child{border-right:0;}
.tbl .bdL{border-left:1px solid #ccc;}
.tbl .bdR{border-right:1px solid #ccc;}

.board td .file-down{text-align: center;}

.titW{display:inline-flex; flex-wrap:wrap; align-items:center; gap:0 16px;}
.titW .btn{margin-bottom:10px;}
.board td a.btn{display:inline-flex; text-align:center;}
.board td a.btn:hover{background-color: var(--color-main-hover);  border-color: var(--color-main-hover); text-decoration: none; color:#fff; font-weight: 400;}


#areaS .paraList > li:not(:first-child){margin-top:8px;}
#areaS .paraList .noList{padding-left:0;}
#areaS .paraList .noList::before{display:none;}
#areaS .lineList{margin-top:0;}

.indImg{display:block; margin:16px auto 0 auto; max-width:900px; width:100%;}


/*? ESG경영 > ESG경영 > CEO메시지 */
#esgCeo{display:flex; flex-direction: column; gap:56px;}
#esgCeo .esgHero{display:flex; gap:40px;}
#esgCeo .esgHero .heroImage{position:relative; width:540px; height:fit-content;}
#esgCeo .esgHero .heroImage .mob{display:none;}
#esgCeo .esgHero .heroCont{flex:1; display:flex; flex-direction:column; gap:32px; padding-top:40px; }
#esgCeo .esgHero .heroCont .esgHeroTitle{position:relative; padding-top:32px; font-size: 3.2rem; font-weight: 600; font-family:'SCD'; letter-spacing: -0.05em;}
#esgCeo .esgHero .heroCont .esgHeroTitle::before{position:absolute; content:''; right:0; top:0; width:120%; height:5px; background:var(--color-main);}
#esgCeo .esgHero .heroCont .esgHeroTitle .em{color:var(--color-main);}
#esgCeo .esgHero .heroCont .heroMessage{display:inline-flex; flex-direction:column; gap:24px; font-size: 1.9rem; color:var(--color-g7);}
#esgCeo .esgHero .heroCont .awardList{display:flex; flex-wrap:wrap; gap:24px 40px;}
#esgCeo .esgHero .heroCont .awardList > li{position:relative; display:inline-flex; flex-direction:column; padding-left:66px; width:calc(50% - 20px);}
#esgCeo .esgHero .heroCont .awardList > li img{position:absolute; left:0; top:50%; transform:translateY(-50%); width:50px; height:50px; }
#esgCeo .esgHero .heroCont .awardList > li strong{font-size: 1.5rem; font-weight: 400; }
#esgCeo .esgHero .heroCont .awardList > li span{font-weight:600; font-size: 2.1rem;}
#esgCeo .esgArticle{display:flex; flex-direction:column; gap:40px;}
#esgCeo .esgArticle .esgSection{display:flex; flex-direction:column; gap:8px;}
#esgCeo .esgArticle h3{font-size: 1.9rem; font-weight: 600; color:var(--color-main);}
#esgCeo .esgArticle .esgSection p{text-align:justify; color:var(--color-g7);}
#esgCeo .esgFooter{display:inline-flex; flex-direction: column; gap:24px; color:var(--color-g7);}
#esgCeo .sign{text-align:right;}
#esgCeo .sign img{margin-bottom:16px; width:240px;}
@media all and (max-width:1680px){
    #esgCeo .esgHero{position:relative; padding-bottom:160px;}
    #esgCeo .esgHero .heroImage{width:350px;}
    #esgCeo .esgHero .awardWarp{position:absolute; left:0; bottom:0;}
    #esgCeo .esgHero .heroCont .awardList{gap:24px 40px; justify-content:center;}
    #esgCeo .esgHero .heroCont .awardList > li{width:fit-content;}
    #esgCeo .esgHero .heroCont .awardList > li span{font-size: 1.9rem;}
}
@media all and (max-width:1440px){
    #esgCeo .esgHero{gap:24px; padding-bottom:140px;}
    #esgCeo .esgHero .heroImage{width:230px;}
    #esgCeo .esgHero .heroCont{padding-top:0; gap:16px;}
    #esgCeo .esgHero .heroCont .esgHeroTitle{padding-top:16px; font-size: 2.1rem;}
    #esgCeo .esgHero .heroCont .esgHeroTitle::before{width:100px; right:auto; left:0; }
    #esgCeo .esgHero .heroCont .heroMessage{gap:16px; font-size: 1.7rem;}
    #esgCeo .esgHero .heroCont .awardList{gap:16px 24px;}
    #esgCeo .esgHero .heroCont .awardList > li{padding-left:50px;}
    #esgCeo .esgHero .heroCont .awardList > li img{width:40px; height:40px;}
    #esgCeo .esgHero .heroCont .awardList > li span{font-size: 1.7rem;}
    #esgCeo .esgHero .heroCont .awardList > li strong{font-size: 1.3rem;}
}
@media all and (max-width:1024px){
    #esgCeo .esgHero .heroImage{width:260px;}
}
@media all and (max-width:768px){
    #esgCeo{gap:32px;}
    #esgCeo .esgHero{flex-direction:column; padding-bottom:0;}
    #esgCeo .esgHero .awardWarp{position:relative; left:auto; bottom:auto;}
    #esgCeo .esgHero .heroImage{display:flex; flex-wrap:wrap; gap:16px 24px; width:100%;}
    #esgCeo .esgHero .heroImage img{width:260px;}
    #esgCeo .esgHero .heroImage .esgHeroTitle{position:relative; flex:1; min-width:fit-content; font-size: 2.1rem; padding-top:16px; font-weight: 600; font-family: 'SCD'; letter-spacing: -0.05em;}
    #esgCeo .esgHero .heroImage .esgHeroTitle .em{color:var(--color-main);}
    #esgCeo .esgHero .heroImage .esgHeroTitle::before{position:absolute; content:''; left:0; top:0; width:100px; height:5px; background:var(--color-main);}
    #esgCeo .esgHero .heroImage .mob{display:block;}
    #esgCeo .esgHero .heroCont .esgHeroTitle{display:none;}
    #esgCeo .esgArticle{gap:32px;}
    #esgCeo .esgArticle h3{font-size: 1.7rem;}
    #esgCeo .sign img{width:160px;}
}
@media all and (max-width:425px){
    #esgCeo .esgHero .heroImage img{width:100%;}
    #esgCeo .esgHero .heroCont .awardList > li span{font-size: 1.5rem;}
    #esgCeo .esgHero .heroCont .heroMessage{font-size: 1.5rem;}
    #esgCeo .esgHero .heroCont .awardList{justify-content: flex-start;}
}

/*? ESG경영 > ESG경영 > ESG경영전략 */
#esgStrategy{text-align:center;}
#esgStrategy img{display:inline-block;}
#esgStrategy .mob{display:none;}
@media all and (max-width:768px){
    #esgStrategy .web{display:none;}
    #esgStrategy .mob{display:inline-block;}
}

/*? 공단소개 - CEO - CEO 인사말 */
#introCeoGreeting .head{ position:relative; padding-top:80px;}
#introCeoGreeting .head .msg{position:absolute; left:30px; top:0; font-size:8.0rem; font-weight: 600; font-family: 'SCD'; z-index:1;}
#introCeoGreeting .head .imgTxt{display:flex; align-items:center; position:relative; padding-left:160px; width:100%; height:365px; background:#000; border-radius:30px; overflow: hidden;}
#introCeoGreeting .head .imgTxt::before{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); object-fit: contain; min-width:100%; min-height:100%; background:url(../images/sub/ceoBg.png) no-repeat 50% 50%; opacity:.3;}
#introCeoGreeting .head .imgTxt .txt{z-index:1; color:#fff; text-align:center; font-size:2.8rem; font-weight:600; font-family: 'SCD'; text-shadow:2px 5px 7px rgba(0,0,0,0.5) ; }
#introCeoGreeting .head .ceoPic{position:absolute; right:70px; bottom:-21px; height:100%;}
#introCeoGreeting .txtCont{text-align:center;}
#introCeoGreeting .txtCont .tit{position:relative; display:inline-block; margin:0 auto; padding:90px 0; font-size: 2.5rem; font-weight: 600; text-align:center; }
#introCeoGreeting .txtCont .tit .em{color:var(--color-main);}
#introCeoGreeting .txtCont .tit::before,
#introCeoGreeting .txtCont .tit::after{position:absolute; content:''; width:70px; height:54px; z-index:-1;}
#introCeoGreeting .txtCont .tit::before{background:url(../images/sub/dbLeft.svg) no-repeat 50% 50%; object-fit: contain; left:-100px; top:70px; }
#introCeoGreeting .txtCont .tit::after{background:url(../images/sub/dbRight.svg) no-repeat 50% 50%; object-fit: contain; right:-100px; bottom:70px; }
#introCeoGreeting .txtCont .txtBx{display:inline-flex; flex-direction:column; gap:24px; }
#introCeoGreeting .txtCont .txtBx p{font-size:1.9rem; text-align:justify;}
#introCeoGreeting .txtCont .txtBx .em{color:var(--color-main); font-weight: 500;}
#introCeoGreeting .sign{margin-top:40px; text-align:right;}
#introCeoGreeting .sign img{margin-bottom:16px; width:240px;}
@media all and (max-width:1440px){
    #introCeoGreeting .head{padding-top:50px;}
    #introCeoGreeting .head .msg{left:30px; font-size: 5.6rem;}
    #introCeoGreeting .head .imgTxt{padding-left:40px; height:280px;}
    #introCeoGreeting .head .imgTxt .txt{font-size: 1.9rem;}
    #introCeoGreeting .head .ceoPic{right:20px; bottom:-16px; }
}
@media all and (max-width:768px){
    #introCeoGreeting .head{padding-top:26px;}
    #introCeoGreeting .head .msg{left:24px; font-size: 2.5rem;}
    #introCeoGreeting .head .imgTxt{padding-left:24px; height:200px; border-radius:24px;}
    #introCeoGreeting .head .imgTxt .txt{font-size: 1.5rem; width:200px; text-align:left;}
    #introCeoGreeting .head .ceoPic{right:0; bottom:-10px;}
    #introCeoGreeting .txtCont .tit{padding:40px 0; font-size: 1.9rem; line-height: 1.2;}
    #introCeoGreeting .txtCont .tit::before{left:0; top:20px; opacity: .5; background-size:contain;}
    #introCeoGreeting .txtCont .tit::after{right:0; bottom:20px; opacity: .5; background-size:contain;}
    #introCeoGreeting .txtCont .txtBx{gap:16px;}
    #introCeoGreeting .txtCont .txtBx p{font-size: 1.7rem; word-break: break-all;} 
    #introCeoGreeting .sign img{width:160px;}   
}
@media all and (max-width:425px){
    #introCeoGreeting .head{padding-top:22px;}
    #introCeoGreeting .head .msg{left:16px; font-size: 2.1rem;}
    #introCeoGreeting .head .imgTxt{border-radius: 16px; height:170px;}
    #introCeoGreeting .head .ceoPic{bottom:-9px;}
    #introCeoGreeting .txtCont .txtBx p{font-size: 1.5rem; }
}



/*? 공단소개 - 연혁, 비전 및 목표 - 전략체계도 */
#historyVisionSystem{text-align:center;}
#historyVisionSystem img{display:inline-block;}
#historyVisionSystem .mob{display:none;}
@media all and (max-width:768px){
    #historyVisionSystem .web{display:none;}
    #historyVisionSystem .mob{display:inline-block;}
} 

/*? 공단소개 - CI - 공단상징 */ 
#ciSymbol .listW{display:flex; flex-direction:column; gap:16px;}
#ciSymbol .patternBox{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:40px; border:1px solid #ccc; border-radius:30px; background:#fff url(../images/sub/pattern.png) repeat; width:100%; min-height:200px;}
#ciSymbol .symbolMark{flex-direction:column; gap:48px;}
#ciSymbol .colorList{display:flex; justify-content:space-between; gap:8px; padding:40px 0;}
#ciSymbol .colorList > li{flex:1; position:relative; display:inline-flex; flex-direction:column; align-items:center;  text-align:center;}
#ciSymbol .colorList > li::before{content:''; width:80px; height:80px; border-radius:16px; }
#ciSymbol .colorList > li:nth-child(1)::before{background:#F5A200;}
#ciSymbol .colorList > li:nth-child(2)::before{background:#8EC31F;}
#ciSymbol .colorList > li:nth-child(3)::before{background:#0092D9;}
#ciSymbol .colorList > li:nth-child(4)::before{background:#B5B5B6;}
#ciSymbol .colorList > li:nth-child(5)::before{background:#005BAC;}
#ciSymbol .colorList > li:nth-child(6)::before{background:#E24508;}
#ciSymbol .colorList > li .tit{margin-top:16px; font-family:'SCD'; text-align:center; font-size: 1.9rem; font-weight: 600;}
#ciSymbol .colorList > li .stxt{font-size: 1.5rem; color:var(--color-g7);}
#ciSymbol .txt{padding:24px 0; color:var(--color-g7); font-size: 1.9rem;}
#ciSymbol .logoType{gap:40px 80px;}
#ciSymbol .color{display:flex; flex-direction:column; gap:16px;}
#ciSymbol .color .stit{font-size: 1.5rem; color:#676767;}
#ciSymbol .color .colors{display:flex; gap:16px; flex-wrap:wrap;}
#ciSymbol .color .colors > li{display:inline-flex; gap:16px; align-items:center; width:calc(100% / 6 - 14px);}
#ciSymbol .color .colors > li::before{content:''; width:80px; height:80px; border-radius:16px;}
#ciSymbol .color .mColor > li.li01::before{background:#FDD23E;}
#ciSymbol .color .mColor > li.li02::before{background:#F5A200;}
#ciSymbol .color .mColor > li.li03::before{background:#EA5504;}
#ciSymbol .color .mColor > li.li04::before{background:#E1E300;}
#ciSymbol .color .mColor > li.li05::before{background:#C4D700;}
#ciSymbol .color .mColor > li.li06::before{background:#00A73C;}
#ciSymbol .color .mColor > li.li07::before{background:#00B9EF;}
#ciSymbol .color .mColor > li.li08::before{background:#00A0E9;}
#ciSymbol .color .mColor > li.li09::before{background:#0075C2;}
#ciSymbol .color .mColor > li.li10::before{background:#E5E4EA;}
#ciSymbol .color .mColor > li.li11::before{background:#B8B6C1;}
#ciSymbol .color .mColor > li.li12::before{background:#929099;}
#ciSymbol .color .sColor > li.li01::before{background:#008CD6;}
#ciSymbol .color .sColor > li.li02::before{background:#0075C2;}
#ciSymbol .color .sColor > li.li03::before{background:#0061A3;}
#ciSymbol .color .sColor > li.li04::before{background:#EA5504;}
#ciSymbol .color .sColor > li.li05::before{background:#D7000F;}
#ciSymbol .color .sColor > li.li06::before{background:#9FA0A0;}
#ciSymbol .color .colors .cmyk{display:inline-flex; flex-direction:column;}
#ciSymbol .color .colors .cmyk > li{display:inline-flex;  gap:16px; font-size: 1.5rem; font-weight: 500; min-width:60px;}
#ciSymbol .color .colors .cmyk > li span{display:inline-block; min-width:15px; font-weight: 400; color:var(--color-g7); text-align:center;}
#ciSymbol .mixLogo{gap:40px;}
#ciSymbol .mixLogo > div{flex:1; display:inline-flex; flex-direction:column; gap:60px; align-items:center; justify-content:center;}
#ciSymbol .mixLogo p{display:inline-flex; flex-direction:column; align-items:center; justify-content:center;  width:100%; padding:8px; background:#fff; border-radius:16px; color:#676767; }
#ciSymbol .mixLogo p .em{font-weight: 500; color:var(--color-g8);}
@media all and (max-width:1280px){
    #ciSymbol .color .colors > li{width:calc(100% / 4 - 12px);}
    #ciSymbol .mixLogo{align-items:stretch;}
    #ciSymbol .mixLogo > div{justify-content:space-between;}
}
@media all and (max-width:768px){
    #ciSymbol .txt{font-size: 1.7rem;}
    #ciSymbol .symbolMark .symbol{width:220px;}
    #ciSymbol .colorList{flex-wrap:wrap; padding:40px 0 0 0;}
    #ciSymbol .colorList > li{flex:none; width:calc(100% / 3 - 29px);}
    #ciSymbol .colorList > li::before{width:60px; height:60px;}
    #ciSymbol .colorList > li .tit{margin-top:8px; font-size: 1.5rem;}
    #ciSymbol .color .colors > li{gap:8px; width:calc(100% / 3 - 11px);}
    #ciSymbol .color .colors > li::before{width:60px; height:60px;}
    #ciSymbol .color .colors .cmyk > li{line-height:1.2;}
    #ciSymbol .color .colors .cmyk > li span{line-height:1.2;}
    #ciSymbol .mixLogo > div{gap:24px;}
    #ciSymbol .mixLogo > div img{width:130px; height:50px; object-fit: contain;}
}
@media all and (max-width:425px){
    #ciSymbol .patternBox{padding:24px; border-radius:16px; gap:40px;}
    #ciSymbol .txt{font-size: 1.5rem; text-align:justify;}
    #ciSymbol .color .colors > li{gap:16px; width:100%;}
    #ciSymbol .color .colors > li::before{width:32px; height:32px; border-radius:8px;}
    #ciSymbol .color .colors .cmyk{flex-direction:row;}
    #ciSymbol .color .colors .cmyk > li{gap:4px;}
}

#gstCusCharter .paraList,
#gstCusCharter .lineList{gap:8px;}
@media all and (max-width:425px){
    #gstCusCharter .paraList,
    #gstCusCharter .lineList{gap:4px;}
}


/*? 공단소개 - 고객헌장 - 고객헌장 전문 */
#gstCusCharter .csc{display:flex; flex-direction:column; gap:40px; margin-bottom:40px; justify-content:center; align-items:center; text-align:center;}
#gstCusCharter .csc .txtW .bold{font-size: 1.9rem;}
#gstCusCharter .csc .txtW .stxt{font-size: 1.5rem; color:#676767; } 
#gstCusCharter .cscList{display:flex; align-items:stretch; justify-content:center; gap:24px;}
#gstCusCharter .cscList > li{display:inline-flex; flex-direction:column; align-items:center; gap:16px; padding:24px 16px; border-radius:16px; background:#fff; flex:1;}
#gstCusCharter .cscList > li .imgW{display:inline-flex; align-items:center; justify-content:center; width:120px; height:120px; border-radius:100%; }
#gstCusCharter .cscList > li:nth-child(1){border:5px solid #008900;}
#gstCusCharter .cscList > li:nth-child(2){border:5px solid #2266BB;}
#gstCusCharter .cscList > li:nth-child(3){border:5px solid #515DD9;}
#gstCusCharter .cscList > li:nth-child(4){border:5px solid #F96B00;}
#gstCusCharter .cscList > li:nth-child(1) .imgW{background-color:#E9F7E9;}
#gstCusCharter .cscList > li:nth-child(2) .imgW{background-color:#E9F4FF;}
#gstCusCharter .cscList > li:nth-child(3) .imgW{background-color:#E5E8FF;}
#gstCusCharter .cscList > li:nth-child(4) .imgW{background-color:#FFEBDB;}
#gstCusCharter .cscList > li .imgW img{width:60px; height:60px; object-fit: contain; transition:.3s;}
#gstCusCharter .cscList > li:hover .imgW img{width:70px; height:70px;}
#gstCusCharter .cscList > li .tit{margin-top:8px; font-size: 2.1rem; font-weight: 600;}
#gstCusCharter .cscList > li .txt{font-size: 1.9rem;}
#gstCusCharter .cscList > li .txt .em{font-weight: 600; color:var(--color-main); background-color:#FDFFCD;}
@media all and (max-width:1280px){
    #gstCusCharter .cscList{gap:16px;}
    #gstCusCharter .cscList > li .txt{font-size: 1.7rem;}
}
@media all and (max-width:768px){
    #gstCusCharter .cscList{flex-wrap:wrap;}
    #gstCusCharter .cscList > li{flex:none; width:calc(100% / 2 - 8px);}
    #gstCusCharter .csc{gap:24px; margin-bottom:24px;}
    #gstCusCharter .csc .txtW .bold{font-size: 1.7rem;}
}
@media all and (max-width:425px){
    #gstCusCharter .cscList{flex-direction:column;}
    #gstCusCharter .cscList > li{gap:8px; flex:1; width:100%;}
    #gstCusCharter .cscList > li .tit{font-size: 1.7rem;}
    #gstCusCharter .cscList > li .txt{font-size: 1.5rem;}
    #gstCusCharter .cscList > li .imgW{width:80px; height:80px;}
    #gstCusCharter .cscList > li .imgW img{width:40px; height:40px;}
    #gstCusCharter .cscList > li:hover .imgW img{width:50px; height:50px;}
}



/*? 정보공개 - 정보공개 - 정보공개안내 */
/* #areaS .paragraph h4, .h4{flex-wrap:wrap;} */
#areaS .pList{display:flex; flex-direction:column; gap:24px;}
#areaS .pList > li{display:flex; align-items:stretch; border-radius:16px; overflow:hidden; }
#areaS .pList > li .left{display:inline-flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; padding:24px; background:var(--color-main); color:#fff; width:300px;}
#areaS .pList > li .left .tit{font-size: 2.1rem; font-weight: 600;}
#areaS .pList > li .right{flex:1; padding:24px;  background:var(--color-g1);}
@media all and (max-width:768px){
    #areaS .pList > li{flex-direction:column; }
    #areaS .pList > li .left{padding:12px; flex-direction:row; gap:8px; width:100%; flex:1; border:1px solid var(--color-main); background:#fff; color:var(--color-main); border-radius:16px 16px 0 0 ;}
    #areaS .pList > li .left .tit{font-size: 1.7rem; }
    #areaS .pList > li .right{padding-left:0; }
}


/*?주요사업 - 산업입지조성 및 리모델링 - 미래전략 산업입지 기획 공금 - 산업단지분양*/
.popS{width:auto;}
.popS .popB{max-height:calc(100vh - 280px);}
#areaS .txtBox{flex-direction:column;}