/**
* OLYM Cascading Style Sheets
* File Name : sub.css
* Description : 서브 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2016.08.09
* Update : 2016.08.09
* Copyright(c) 2015 OLYM Communications. All Rights Reserved.
*/


*,
*::before,
*::after { margin: 0; padding: 0; word-break: keep-all; list-style: none; box-sizing: border-box; } 

img { max-width: 100%; } 

* { margin: 0; padding: 0; box-sizing: border-box; } 
ul, ol, li { list-style: none; } 

a { color: inherit; text-decoration: none; } 

address { font-style: normal !important; } 

body { /* background: var(--bg-body); */
 position: relative; font-family: 'Pretendard Variable', Pretendard, sans-serif; } 

#wrap { position: relative; z-index: 0; } 

#wrap::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: #ffffff; background-image:
 radial-gradient(circle, rgba(210, 235, 255, 0.25) 0%, transparent 65%),
 radial-gradient(circle, rgba(200, 225, 255, 0.18) 0%, transparent 65%),
 radial-gradient(circle, rgba(220, 240, 255, 0.22) 0%, transparent 65%),
 radial-gradient(circle, rgba(200, 230, 255, 0.2) 0%, transparent 65%),
 radial-gradient(circle, rgba(215, 238, 255, 0.15) 0%, transparent 65%); background-repeat: no-repeat; background-position:
 10% -20%,
 -10% 55%,
 110% 40%,
 35% 115%,
 80% 80%; background-size:
 70% 70%,
 60% 60%,
 65% 65%,
 75% 75%,
 55% 55%; animation: floatBlobs 12s ease-in-out infinite alternate; content: ""; filter: blur(6rem); } 

@keyframes floatBlobs { 
 0% { background-position:
 10% -20%,
 -10% 55%,
 110% 40%,
 35% 115%,
 80% 80%; } 
 100% { background-position:
 30% -15%,
 -5% 60%,
 100% 35%,
 40% 105%,
 75% 85%; } 
 }

:root { /* 주조색 (핵심 컬러 2종으로 통일) */
 --color-primary: #2269c1; --color-primary-dark: #0a3c89; --color-primary-light:#2269C1; /* 기본/배경색 */
 --bg-body: #f0f3f8; --bg-white: #ffffff; --bg-box: #eaeef5; /* 텍스트 컬러 (3단계) */
 --text-dark: #222222; --text-mid: #666666; --text-light: #999999; /* 선/테두리 */
 --border-main: #d3d6de; --border-light: #e0e0e0; } 

#container {display: flex;gap: 40px;padding: 150px 0 50px 0;min-height: 1000px;} 

#snb { flex-basis: 300px; flex-shrink: 0; background: #fff; } 
#snb h2 { display: flex; align-items: center; /* margin-bottom: 20px; */
 padding: 40px; height: 120px; /* justify-content: center; */
 background: linear-gradient(30deg, #003882, #2FAAE5); font-size: 27px; font-weight: 700; color: #fff; border-radius: 20px 20px 0 0; } 

.snb_group { padding: 20px; } 
.snb_group > li > a {display:block;padding: 20px 20px;border-bottom: 1px solid rgb(0 0 0 / 7%);position: relative;font-weight: 600;color:#303030; font-size: 18px;} 
.snb_group > li > a::after { position: absolute; top: 50%; right: 10px; font-family: 'remixicon'; font-family: "remixicon"; font-size: 17px; font-weight: normal; color: #dbdbdb; transition: all ease 0.3s; content: '\ea4e'; transform: translateY(-50%); } 
.snb_group > li > a:hover, .snb_group > li > a.over,
.snb_group > li > a:hover::after, .snb_group > li > a.over::after { color: #003882; } 

.snb_group > li > ul { padding:10px 0; background-color: #f6f6f6; } 
.snb_group > li > ul > li > a { display:block; padding: 5px 20px 5px 30px; position: relative; font-size: .875em; color: #5d5d5d; } 
.snb_group > li > ul > li > a::before { position: absolute; top: 50%; left: 15px; font-family: "remixicon"; font-size: .625em; font-weight: normal; color: #5d5d5d; transition: all ease 0.3s; content: '\EB7B'; transform: translateY(-50%); } 
.snb_group > li > ul > li > a:hover, .snb_group > li > ul > li > a.over,
.snb_group > li > ul > li > a:hover::before, .snb_group > li > ul > li > a.over::before { color:#000; } 

#contents_box { width: 100%; } 
#spot { display: flex; align-items: center; position: relative; font-size: 15px; box-sizing: border-box; /* background-color: #e4eff8; *//* height: 120px; *//* border-radius: 20px; *//* padding: 0 60px; *//* position: relative; */  padding-bottom: 10px;} 
#spot::after { display: block; position: absolute; right: 50px; bottom: -11px; width: 334px; background:url("/project/design/com/spot5.png") no-repeat 90% bottom / cover; content: ""; /* height: 198px; */ } 


.location > ul { display: flex; gap: 20px; align-items: center; } 
.location > ul > li {position: relative;font-size: 15px;font-weight: 500;color: #535e72;} 
.location > ul > li:before { position: absolute; top: 0; left: -10px; font-family: "remixicon"; font-size: 1.25em; content: '\EA54'; transform: translate(-50.5%,0); opacity: 0.4; } 
.location > ul > li:first-child {/* font-size: 1.125em; */color: #2269c1;} 
.location > ul > li:first-child::before { display: none; } 

.stle {/* margin: 20px 0 40px 0; */font-size: 40px;font-weight: 800;color: #000;} 
#contents {/* padding: 40px; */background: #fff;font-size:1em;color:#666;border-radius: 20px;margin-top: 30px;border: 1px solid #f4f4f4;     padding: 3%;} 
.img_ready { text-align: center; } 


.sub-inner {margin: 0 auto;max-width: 1700px;} 


@media all and (max-width:1900px){
 .sub-inner {width: 90%;} 
 }

@media all and (max-width:1260px) {
    /* 기존 유지: 상단 레이아웃 */
    #spot { text-align: center; display: flex; align-items: center; justify-content: center; }
    #contents_box {margin-top: 20px;}
    #container {gap: 0;flex-direction: column;padding-top: 100px;} 
    #snb { flex-basis: auto; position: unset; background: 0; } 
    .stle { font-size: 30px; text-align: center; }
    #snb h2 {margin-bottom: 30px;border-radius: 10px;padding: 30px 40px;} 

    /* ==================================================
       ✨ 1차 메뉴 : 표 느낌을 지우고, 숨통을 틔운 모던 탭 스타일
    ================================================== */
    .snb_group {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        background: #fff;
        border: 1px solid #e4e8f0; /* 아주 연한 테두리 */
        border-radius: 14px; /* 바깥 모서리를 더 부드럽게 */
        margin: 0;
        padding: 6px; /* 💡 핵심: 박스 안쪽에 여백을 줘서 덜 답답하게 함 */
        /* max-width: 900px; */
        /* box-shadow: 0 8px 20px rgba(0,0,0,0.03); */ /* 은은한 입체감 */
        padding: 10px 20px;
        gap: 10px;
    } 
    
    .snb_group > li {
        /* flex: 1 1 30%; */
        position: relative;
        border: none;
        flex: 1;
    } 
    
    .snb_group > li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        /* min-height: 52px; */
        padding: 10px 5px;
        font-size: 16px;
        font-weight: 500;
        color: #666;
        word-break: keep-all;
        letter-spacing: -0.03em;
        transition: all 0.2s ease;
        border-radius: 0;
        /* padding: 20px; */
        border-bottom: 0;
        padding: 20px;
    } 

    
    /* 활성화(클릭된) 상태 */
    .snb_group > li.on > a {
        color: #2269c1; 
        font-weight: 700;
        background-color: #f0f6ff; /* 💡 선 대신 아주 연한 파스텔 블루 배경으로 강조 */
    }

    /* ==================================================
       ✨ 2차 메뉴 : 본문과 겹치지 않게 여백 추가, 선명한 툴팁 스타일
    ================================================== */
    .snb_group > li > ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        /* margin-top: 10px; */ /* 💡 1차 메뉴와 살짝 띄워서 답답함 해소 */
        width: max-content;
        min-width: 160px;
        background: #fff;
        border: 1px solid #e4e8f0; /* 강한 파란선 대신 깔끔한 회색선 */
        border-radius: 10px;
        padding: 8px 0;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* 그림자를 줘서 확실히 떠보이게 */
        z-index: 100;
        width: 100%;
        background: #eaf1fb;
        border-radius: 10px;
        max-height: 180px;
        overflow-y: scroll;
        /* top: 45px; */
    } 

    .snb_group > li > ul > li > a {
        display: block;
        padding: 10px 20px;
        text-align: center;
        font-size: 15px;
        color: #555;
    }
    .snb_group > li > ul > li > a:hover {
        color: #2269c1;
        /* background-color: #f9fbfc; */
        font-weight: 600;
    }
    .snb_group > li > ul > li > a::before { display: none; }

    #contents img { max-width:100%; } 
}

@media all and (max-width:800px) { /* #container { padding-top: 50px; } */
#spot { /* height: 80px; */padding: 0 30px; border-radius: 10px; } 
#spot::after { right: 20px; width: 200px; /* height: 119px; */ } 
.location > ul { gap: 20px; } 
.location > ul > li { font-size: .875em; font-weight: 400; } 
.location > ul > li:first-child {font-size: .875em;} 
.location > ul > li:before { left: -10px; font-size: 1em; } 
#snb { top: 120px; } 
.snb_group { flex-wrap: wrap; } 
.snb_group > li {/* flex: 1 1 30%; */min-width: 140px;} 
.snb_group > li > a { padding: 10px; } 
/* .snb_group > li:nth-child(3) > a::after { display: none; }  */
.snb_group > li > ul {/* top: 41px; */} 

.stle { font-size: 1.35em; /* margin: 130px 0 30px 0; */ } 

.cont1 .snb_group > li > ul { top: 84px; } 
.cont1 .stle { /* margin: 150px 0 30px 0; */text-align: center; } 
.cont3 .stle, .cont .stle {/* margin: 90px 0 30px 0; */} 
}

@media all and (max-width:500px){
 /* #container { padding-top: 70px; }  */
#spot { /* height: 140px; */align-items: flex-start; justify-content: center; padding: 15px; } 
#spot::after { right: 50%; bottom: -6px; width:180px; transform: translateX(50%); /* height: 107px; */ } 
#snb { top: 150px; } 
.snb_group > li > a {padding: 10px;min-width: 140px; font-size: 15px; } 
.snb_group > li > ul > li > a {/* padding: 5px 5px 5px 20px; *//* line-height: 1.2em; */letter-spacing: -0.04em;font-size: 14px;} 
.snb_group > li > ul > li > a::before { left: 10px; } 
.stle { font-size: 1.35em; /* margin: 110px 0 30px 0; */ } 

#snb h2{
    padding: 20px;
    height: auto;
    font-size: 20px;
    margin-bottom: 15px;
}

 }


h3.stle{
    text-align: left;
    font-size: 40px;
    font-weight: 700;
}

h3.stle2 {font-size: 35px;font-weight: 700;/* padding: 105px 0 83.5px 0; */text-align: center;font-family: 'SCoreDream', sans-serif;color: #000;
margin: 50px 0;
}

/* boader h3 _0102 주요업무/조직도 하단 title 조직도 */
#board h3 { color: #000;}
.img_ready { text-align: center; }

@media all and (max-width:1600px) {
    .snb_group>li>a {/* padding: 0 70px; */}
    .snb_group>li:first>a { padding-left: 90px; }
}

@media all and (max-width:1460px) {
    #spot {/* height: 450px; */}
    #spot h2 { font-size: 50px; }
    .location>ul>li.home>a {/* font-size: 20px; */}
    .snb_group {/* margin-top: -40px; *//* height: 80px; *//* padding-right: 120px; */}
    .snb_group>li>a {/* font-size: 18px; */}
    .snb_group>li:first-child>a {/* padding-left: 60px; */}
    .snb_group>li>a.over::after {/* top: 17px; */}
    #lnb .lnb_wrap>ul { margin-right: 150px; }
    h3.stle, h3.stle2, #board h3 {font-size: 35px;/* padding: 60px 0 45px 0; */}
}

@media all and (max-width:1260px) {
    #spot {/* height: 350px; */justify-content: center; padding:10px 0;}
    #spot h2 { font-size: 40px; margin-top: 80px; }
    .snb_group {/* padding-right: 80px; */justify-content: space-around;width: 100%;}
    .snb_group>li>a {font-size: 15px;/* padding: 0 30px; */align-items: flex-start;justify-content: flex-start;font-weight: 600;}
    .snb_group>li:first-child>a {/* padding-left: 60px; *//* padding-left: 0; *//* justify-content: flex-start; *//* padding: 20px; */}
    h3.stle, h3.stle2, #board h3 {font-size: 30px;/* padding: 40px 0 25px 0; */text-align: center;}
    .img_ready img { width: 100%; }

}

.snb_group > li > a::after{display: none;}

.snb_group > li:has(ul) > a::after{
    display: block;
}
@media all and (max-width:800px) {
    #spot h2 { font-size: 30px; }
    .location>ul>li {font-size: 13px;/* padding: 0 10px; */}
    .location>ul>li:not(.home)::before { width: 12px; height: 16px; }
    h3.stle, h3.stle2, #board h3 {font-size: 4vw;}
    .snb_group>li>a {font-size: 15px;/* line-height: 3.2em; */padding: 10px;}
    /* .snb_group>li>a.over::after { top: 10px; } */

   #contents{
        padding: 10% 5%;
    }
    .snb_group > li:last-child > a{
        border: 0;
    }
}

@media all and (max-width: 550px) {
    .snb_group {padding: 20px;flex-wrap: wrap;}
    h3.stle, h3.stle2,#board h3 { font-size: 24px; }
    .snb_group>li>a{padding: 10px 0;}
    .snb_group > li > a::after{right: 5px;}
}

@media all and (max-width:440px) {
    #spot h2 { font-size: 25px; }
    .snb_group>li>a {/* font-weight: 400; */font-size: 14px;}
    h3.stle, h3.stle2, #board h3 {font-size: 20px;margin: 0 0 20px 0;}

    
}