/* 에코섬유융합연구원 */


/**********************************************************************
********************    레이아웃   ********************************
**********************************************************************/
.wrappwe{border:1px solid red; }
.contents_container{
	display: flex;
	justify-content: space-between;
	max-width: 1440px; width:100%; margin: 0 auto; 
	}

/*   상단 메뉴*/
#gnb { }


/*  콘텐츠 영역  */
main{max-width: 1100px; width: 100%; margin:0 auto; }

.location_breadcrumb{}
.location-container{}

.SubContents_container{}

@media (max-width:1439px){
	.location_breadcrumb{
	display:flex;
	flex-direction: column-reverse;
		}
	#location_container{text-align:center; }
	.lnb{display:none;}
}


@media (min-width: 1440px) {
	main{margin:28px 0 50px auto; }
	
	.lnb_wrap{padding: 40px 0;}
	.lnb{width: 270px; border: 1px solid var(--gray1); border-radius: 10px;}

 
}


/**********************************************************************
********************    좌 측 메 뉴   ********************************
**********************************************************************/
#mysubmenu .leftmenu_b::after {
    content: '';
    position: absolute;
    background-image: url(../images/sub_menu_bg.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 160px;
    opacity: 46%;
    left: -40px;
    top: -10px;
	z-index: 1;
}
#mysubmenu ul{margin-bottom: 0;}
#mysubmenu .leftmenu_b {position: relative; padding: 50px 0; text-align:center; font-size:24px; font-weight:bold; border-radius: 10px; background: var(--main); box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 18px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; overflow: hidden;}
#mysubmenu .leftmenu_b + ul {padding: 20px 16px;}
#mysubmenu .leftmenu_b a{position: relative; padding: 40px 0; margin-bottom:15px; color: #fff; text-align:center; font-size:24px; font-weight:bold; z-index: 2;}
#mysubmenu .leftmenu_s{ border-bottom: 1px dashed var(--gray1);}
/* #mysubmenu .leftmenu_s:last-of-type{border-bottom: none;} */
#mysubmenu .leftmenu_s > a {display: flex; justify-content: space-between; align-items: center; font-size: 17px; color:#333; }
#mysubmenu .leftmenu_s a{display: flex; padding: 14px 0 14px 20px; color: #000;}
#mysubmenu .leftmenu_s a.active{color: var(--main); font-weight:bold;}
#mysubmenu .leftmenu_s:last-child .leftmenu_ul2{border-radius: 0 0 50px 0;}
#mysubmenu .gnb_3da{ padding: 12px 0 12px 20px;}
#mysubmenu .gnb_3dli.active .gnb_3da {color: #007BFF; font-weight: bold;}
#mysubmenu .gnb_3dli{padding: 0;}
.leftmenu_ul2{background: #faf8f9;}
.leftmenu_li{border-top: 1px solid #d2d2d2;}
.leftmenu_a2{margin-left: 10px; font-size: 14px;}
.depth_arrow{position: relative;}
.depth_arrow::before{content: "\f078"; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 26%; right: 7%; color: #999;}
.leftmenu_ul2{display: none;}
.depth_arrow.on .leftmenu_ul2{display: block;}
.depth_arrow.on::before{transform: rotate(180deg);}


.contents_container_0{max-width: 1320px; margin: 0 auto;}
#mysubmenu .leftmenu_s .gnb_3dul_box {display: none;}
#mysubmenu .leftmenu_s .menu-icon {margin-left: 10px; transition: transform 0.3s; font-size: 14px;}
#mysubmenu .gnb_3dul_box {display: flex; flex-direction: column; padding: 10px; background: #fff;}


/* 2차 메뉴 active */
#mysubmenu .leftmenu_s.active{position: relative;}
#mysubmenu .leftmenu_s.active > a,
#mysubmenu .leftmenu_s:hover > a {text-decoration: none; font-weight: 600; color: var(--main);}
#mysubmenu .leftmenu_s.active > a::after {content: ''; position: absolute; display: block; width: 100%; height: 2px; top: 53px; left: 0; background: var(--main);}
#mysubmenu .leftmenu_s.active > a .toggle-icon::before{background: var(--main);}

/* 3차 메뉴 : hover + active */
#mysubmenu .leftmenu_s .gnb_3dli:hover > a,
#mysubmenu .leftmenu_s .gnb_3dli.active > a {background: var(--blue1); color: var(--main); font-weight: bold; border-radius: 10px;}
#mysubmenu .leftmenu_s .gnb_3dli > a,
#mysubmenu .leftmenu_s .gnb_3dli > a{padding: 10px 0 10px 20px;}

/* 서브메뉴 기존 충돌 방지용 세부 선택자 */
#mysubmenu .leftmenu_s .gnb_3dul_box{display:none;}


/* +,- 아이콘 */
.toggle-icon {position: relative; width: 12px; height: 12px; margin-left: 8px; display: inline-block;}
.toggle-icon::before,
.toggle-icon::after {content: ""; position: absolute; background: var(--gray2); transition: all 0.3s ease;}

/* 가로 선 ( - ) */
.toggle-icon::before {top: 50%; left: 0; width: 12px; height: 2px; transform: translateY(-50%);}

/* 세로 선 ( | ) – plus일 때만 보임 */
.toggle-icon.plus::after {left: 50%; top: 0; width: 2px; height: 12px; transform: translateX(-50%);}

/* minus일 땐 세로선 제거 */
.toggle-icon.minus::after {display: none;}


/* 정보공개 > 경영공시 하위메뉴 감추기 */
/* 삭제해야할 경우 skin/nav/mysubmenu.php 하단 스크립트도 삭제 */
/* 권장: 본 페이지에만 적용 (예: body.page-openinfo-gongsi) */
body.page-openinfo-gongsi .lnb #mysubmenu #mysub5 .leftmenu_s.no-sub > a .toggle-icon {
  display: none !important;
}

/* 아이콘이 사라져도 오른쪽 여백이 남지 않게 */
body.page-openinfo-gongsi .lnb #mysubmenu #mysub5 .leftmenu_s.no-sub > a {
  padding-right: 0 !important;   /* 사이트 기본 스타일에 맞춰 수치 조정 */
}

/* 만약 body 클래스 못 쓰면, 앵커 속성으로 한정해도 OK */
.lnb #mysubmenu #mysub5 .leftmenu_s > a[href*="co_id=info_reports"] .toggle-icon {
  display: none !important;
}
.lnb #mysubmenu #mysub5 .leftmenu_s > a[href*="co_id=info_reports"] {
  padding-right: 0 !important;
}




@media (max-width:1280px){
	.contents_container,
	.contents_container_0{border:0; }
	.lnb{max-width: 220px; top: -240px;}
	#mysubmenu .leftmenu_b {padding: 28px 0; border-radius: 40px 0 0 0; }
	#mysubmenu > li > a{padding:8px 0 8px 16px; font-size:12px !important;}	
}


@media (max-width:1023px){
	.navbar{position:relative;}
	.navbar-brand img{width:200px;}

	.contents_container,
	.contents_container_0{width: 100%; padding:0;}	
	.contentBody{width: 100%;}	
}



@media (max-width:639px) {
	.contents_container_0{padding:0;}
}




/**************************************
***************  브레이드크럼 *************
**************************************/
@media (max-width:960px){
#breadcrumb-container{padding:0; margin: 0 0 20px 0; background-color:#f8f8f8;}
}


nav.breadcrumb {
	font-size: 14px;
}

nav.breadcrumb a {
	position: relative;
	color: #333;
	text-decoration: none;
	margin-right: 5px;
	padding: 0 8px;
}

@media (min-width:1440px) {	nav.breadcrumb a:first-child{padding-left:0; } }

nav.breadcrumb a:hover {
	text-decoration: underline;
}

.menu-panel {
  width: 160px;
  border: 1px solid #ccc;
  padding: 20px;
  position: absolute;
  top: 20px;
  z-index: 10;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.menu-panel li {
	cursor: pointer;
	margin: 5px 0;
	padding: 0 8px;
}

.menu-panel li:hover {
	text-decoration: underline;
}

.breadcrumb{margin-bottom:0; padding: .75rem 0 !important;}

.breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	position: relative;
}

.breadcrumb_arrow_box{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	margin-left: 8px;
	cursor: pointer;
}

.breadcrumb .arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid #333;
	transition: transform 0.2s ease;
}
.breadcrumb {
  background-color: transparent !important;
}
/* 열렸을 때 화살표 회전 (▼ -> ▲) */
.breadcrumb a[aria-expanded="true"] .arrow {
	transform: rotate(180deg);
}

.menu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 180px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 8px 0;
	box-shadow: 0 6px 20px rgba(0,0,0,.08);
	z-index: 20;
}

.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel li {
	padding: 8px 22px;
	cursor: pointer;
	white-space: nowrap;
}
.menu-panel li:hover { background: #f3f4f6; }

@media (min-width:1440px){
	#breadcrumb-container{padding:0;margin: 0; background-color:#fff;}
	#breadcrumb-container .breadcrumb_arrow_box{display:none}

}

.breadcrumb .menu-panel[hidden]{ display: none !important; }



/**********************************************************************
********************     서 브 페 이 지 공 통  css  ********************************
**********************************************************************/

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid #1a73e8;   /* 파란색 아웃라인 */
  outline-offset: 2px;          /* 요소와 살짝 띄움 */
  background-color: #f0f7ff;    /* 배경 강조 (선택사항) */
}



a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px dashed #ff6600;  /* 주황색 테두리 */
  outline-offset: 3px;
  border-radius: 6px;
  background-color: #fff8f0;   /* 부드러운 강조 배경 */
  z-index: 50px;
}



.skip-link {
  position: absolute; left: -9999px;
  top: auto; width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 16px; top: 16px;
  width: auto; height: auto;
  padding: .75rem 1rem;
  background: #000; color: #fff;
  border-radius: .5rem;
  z-index: 1000;
}


h1{font-size: 28px; margin-bottom: 30px;}



@media (min-width:1440px){
	h1{font-size:28px; margin-bottom:30px; }
}



















/*    뉴스레터 202509호  */
        /* ---------- Base / Reset ---------- */
      

      

        .ECO img {
            max-width: 100%;
            display: block
        }

        .ECO button {
            font: inherit
        }

     
        /* ---------- Layout ---------- */
        .ECO.nl-wrap {
            max-width: 1100px;
            margin: 0 auto;
            padding: 20px
        }

        .ECO.section {
            margin: 28px 0
        }

        .ECO.section h2 {
            margin: 0 0 16px;
            font-size: clamp(1.15rem, 1.2rem + 0.5vw, 1.6rem);
            font-weight: 800;
            color: red;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ECO.section h2::before {
            content: "»";
            font-weight: 900;
            color: #2f7af3;
        }

        /* ---------- Header ---------- */
        .ECO.header {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            background: linear-gradient(135deg, #0b2d5c, #163b7e 40%, #3a7bd5);
            color: #fff;
        }

        .ECO.header-inner {
            padding: 28px 24px
        }

        .ECO.header .topline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            opacity: .9;
            font-weight: 600
        }

        .ECO.header .kicker {
            font-size: .95rem
        }

        .ECO.header .vol {
            font-size: .95rem
        }

        .ECO.header h1 {
            margin: 10px 0 6px;
            font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.6rem);
            letter-spacing: .02em
        }

        .ECO.header p.sub {
            margin: 0;
            opacity: .9;
            font-size: clamp(.92rem, .8rem + .4vw, 1.05rem)
        }

        /* ---------- 공고 ---------- */
        .ECO.announce {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(3, 1fr)
        }

        .ECO.announce .card {
            background: #fff;
            border-radius: 14px;
            padding: 18px;
            box-shadow: 0 4px 14px rgba(6, 32, 82, .08);
            border: 1px solid #e8eef8;
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 130px;
        }

        .ECO.announce .title {
            font-weight: 800;
            color: #173a7b
        }

        .ECO.announce .meta {
            font-size: .92rem;
            color: #4a566b;
            line-height: 1.35
        }

        .ECO.badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: .82rem;
            color: #3765d6
        }

        .ECO.badge::before {
            content: "»";
            display: inline-block
        }

        /* ---------- 주요활동 카드 ---------- */
        .ECO.grid {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(3, 1fr)
        }

        .ECO.card {
            background: #fff;
            border: 1px solid #e8eef8;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 16px rgba(17, 36, 94, .06);
            display: flex;
            flex-direction: column;
            min-height: 100%;
        }

        .ECO.card .thumb {
            aspect-ratio: 16/9;
            background: #e9eff7;
            overflow: hidden;
        }

        .ECO.card .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .ECO.card .body {
            padding: 14px 14px 12px
        }

        .ECO.card .kicker {
            font-size: .83rem;
            color: #3b5fb6;
            font-weight: 700;
            margin-bottom: 6px
        }

        .ECO.card .title {
            font-weight: 800;
            font-size: 1rem;
            color: #1c2f55
        }

        .ECO.card .meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            font-size: .9rem;
            color: #5b677a
        }

        .ECO.card .more {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #f1f6ff;
            color: #1e5fe3;
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 700;
            font-size: .88rem
        }

        .ECO.card .more::after {
            content: "»»"
        }

        /* ---------- 3단 정보 블록 ---------- */
        .ECO.columns3 {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(3, 1fr)
        }

        .ECO.panel {
            background: #fff;
            border: 1px solid #e8eef8;
            border-radius: 14px;
            padding: 16px 16px 4px;
            box-shadow: 0 6px 16px rgba(17, 36, 94, .06);
        }

        .ECO.panel h3 {
            margin: 4px 0 10px;
            font-size: 1.05rem;
            color: #173a7b;
            font-weight: 800
        }

        .ECO.panel ul {
            margin: 0;
            padding: 0;
            list-style: none
        }

       .ECO .panel li {
            padding: 10px 6px;
            border-top: 1px dashed #e7edf7;
            font-size: .95rem
        }

        .ECO .panel li:first-child {
            border-top: 0
        }

        .ECO .panel li .date {
            color: #7a879a;
            font-size: .86rem
        }

        /* ---------- 장비 소개 ---------- */
        .ECO .asset {
            display: grid;
            gap: 16px;
            grid-template-columns: 420px 1fr;
            align-items: start
        }

        .ECO .asset .frame {
            background: #fff;
            border: 1px solid #e8eef8;
            border-radius: 12px;
            overflow: hidden;
        }

        .ECO .asset .frame .thumb {
            aspect-ratio: 4/3;
            background: #eef3fb
        }

       .ECO .asset table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            overflow: hidden;
            background: #fff;
            border: 1px solid #e8eef8;
            border-radius: 12px;
            box-shadow: 0 6px 16px rgba(17, 36, 94, .06)
        }

        .ECO .asset th,
        .ECO .asset td {
            padding: 10px 12px;
            text-align: left;
            vertical-align: top;
            font-size: .95rem
        }

        .ECO .asset th {
            width: 120px;
            background: #f6f9ff;
            color: #173a7b;
            font-weight: 800;
            border-bottom: 1px solid #e8eef8
        }

       .ECO .asset td {
            border-bottom: 1px solid #eef3fb
        }

        .ECO .asset tr:last-child th,
        .ECO .asset tr:last-child td {
            border-bottom: 0
        }

        /* ---------- 미션/비전 ---------- */
        .ECO .mv {
            display: grid;
            gap: 16px;
            grid-template-columns: 1fr 1fr;
        }

       .ECO .mv .box {
            background: #fff;
            border: 1px solid #e8eef8;
            border-radius: 16px;
            padding: 18px;
            box-shadow: 0 6px 16px rgba(17, 36, 94, .06)
        }

        .ECO .mv h3 {
            margin: 0 0 8px;
            color: #173a7b;
            font-size: 1.05rem
        }

        .ECO .mv p {
            margin: 0;
            color: #314159
        }

        /* ---------- Footer ---------- */
       .ECO .footer {
            margin-top: 24px;
            background: #0e2b5e;
            color: #cfe0ff;
            border-radius: 12px;
            overflow: hidden
        }

       .ECO .footer .inner {
            padding: 18px
        }

        .ECO.footer small {
            opacity: .9
        }

        /* ---------- Responsive ---------- */
        @media (max-width: 960px) {
            .ECO .announce {
                grid-template-columns: 1fr 1fr
            }

            .ECO .grid {
                grid-template-columns: 1fr 1fr
            }

           .ECO .columns3 {
                grid-template-columns: 1fr 1fr
            }

            .ECO .asset {
                grid-template-columns: 1fr
            }

           .ECO .mv {
                grid-template-columns: 1fr
            }
        }

        @media (max-width: 640px) {

            .ECO .announce,
            .ECO .grid,
            .ECO .columns3 {
                grid-template-columns: 1fr
            }

            .ECO .header-inner {
                padding: 22px 16px
            }

           .ECO .nl-wrap {
                padding: 14px
            }
        }