@charset "UTF-8";

[class^="imgTxt_st"] > ul > li,
[class^="imgTxt_st"] > ul > li + li{ gap: 4.11rem;}
[class^="imgTxt_st"] > ul > li > .imgWr {background: #fff; width: 10rem;}
.rsp_img.center { margin: 0 auto; width: 100%; text-align: center;}

.box_ty1{ min-height:15rem; display: flex; gap: 1rem 3rem; padding:1.5rem; border-radius:0.5rem; background:#f5f9f8;}
.box_ty1 .img{ width: 15rem; height: 15rem; padding:1rem; display: flex; align-items: center; justify-content: center; box-shadow:0 0 5px rgba(0,0,0,0.08); border-radius:0.5rem; background:#fff;}
.box_ty1 .img img{ max-width:100%; height:auto;}
.box_ty1 .cont{ flex: 1; padding-top:1.5rem;}
.box_ty1 .cont > h3{ position:relative; border-bottom:1px solid #ccc; margin-bottom:1rem; padding:0 0 1rem;}
.box_ty1 .cont > h3:before{ content:""; position:absolute; left:0; bottom:0; width:6.5rem; border-top:4px solid #2a6900;}

/* 오시는 길 */
.map_Info .bscInfr ul li strong { width: 12.5rem;}

/* 연혁 */
.history_wrap dl dt { letter-spacing: -1px;}

/* 지식재산권 현황 */
.inteProp_wrap > ul { display: flex; width: calc(100% + 2rem); margin-left: -1rem; flex-wrap: wrap;}
.inteProp_wrap > ul > li { width: calc(50% - 2rem); margin: 1rem; border-radius: 0.5rem; border: 1px solid #e0e0e0; padding: 1.5rem; display: flex; transition: all 0.2s;}
.inteProp_wrap .img { position: relative; width: 9rem; height: 12.5rem; box-shadow:0 0 20px rgba(0,0,0,0.08); border-radius: 0.3rem; overflow: hidden; cursor: pointer;}
.inteProp_wrap .img::before { content: '\f2db'; font-family: 'remixicon'; font-size: 1.2rem; color: #fff; display: block;width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #2a6900; line-height: 2.5rem; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.2s; opacity: 0;}
.inteProp_wrap .img img { height: 100%; width: 100%; object-fit: contain;}
.inteProp_wrap .txt { width: calc(100% - 9rem); padding-left: 1.8rem; display: flex; align-content: space-around; flex-wrap: wrap}
.inteProp_wrap .txt h5 { width: 100%;}
.inteProp_wrap .txt .list_st3 { width: 100%;}
.inteProp_wrap .txt .list_st3 li { font-size: 0.85rem; color: #000; font-weight: 500;}
.inteProp_wrap .txt .list_st3 span { display: block; color: #444;}
.inteProp_wrap > ul > li:hover { border-color: #2a6900;}
.inteProp_wrap > ul > li:hover h5 {color: #2a6900;}
.inteProp_wrap > ul > li .img:hover::before { opacity: 1;}

/* 조직도 */
.organ.rsp_img { position: relative;}
.organ.rsp_img::before { content: ''; background: url(/images/web/pocenter/sub/img0104_bg1.png) no-repeat center / contain; width: 25.7rem; height: 7.95rem; display: block; position: absolute; top: 0; left: 0; z-index: 1;}
.organ.rsp_img::after { content: ''; background: url(/images/web/pocenter/sub/img0104_bg2.png) no-repeat center / contain; width: 13.25rem; height: 13rem; display: block; position: absolute; top: 0; right: 0; z-index: 1;}
.organ.rsp_img img { position: relative; z-index: 2;}

.org_wrap{ position:relative; margin-bottom:3rem;}
/* .org_wrap::before { content: ''; background: url(/images/web/pocenter/sub/img0104_bg1.png) no-repeat center / contain; width: 25.7rem; height: 7.95rem; display: block; position: absolute; top: 0; left: 0; z-index: -1;}
.org_wrap::after { content: ''; background: url(/images/web/pocenter/sub/img0104_bg2.png) no-repeat center / contain; width: 13.25rem; height: 13rem; display: block; position: absolute; top: 0; right: 0; z-index: -1;} */
.org_wrap .std{ position:relative; max-width:9.5rem; height:3rem; line-height:1.3; display: flex; align-items: center; justify-content: center; margin:0 auto; border-radius:0.25rem; font-weight: 600;}

.org_wrap h2 span{ display: flex; width:7rem; height:7rem; align-items: center; text-align: center; line-height:1.3; color:#fff; font-size: 1.1rem; font-weight: 700; padding:1rem; border-radius:50%; border:0.5rem solid #d3decc; background:#2a6900; margin:0 auto;}
.org_wrap h3{ position:relative; padding:1.5rem 0;}
.org_wrap h3:before{ content:""; position:absolute; left:50%; top:0; height:100%; border-right:1px solid #ccc; }
.org_wrap h3 .std{ background:#2a6900; color:#fff; }
.org_wrap h3 .std{ background:#2a6900; color:#fff; }
.org_wrap h4 {position:relative; padding:1.5rem 0; }
.org_wrap h4:before{ content:""; position:absolute; left:50%; top:0; height:100%; border-right:1px solid #ccc; }
.org_wrap h4 .std{ border:2px solid #2a6900; background:#fff; color:#2a6900; }

.org_wrap .org_dep1{ position:relative; z-index: 1;}
.org_wrap .org_dep2 > ul{ display: flex; gap: 0 0.5rem;} 
.org_wrap .org_dep2 > ul > li{ position:relative; min-width:0px; display: flex; flex-direction: column; gap: 0 0.5rem;} 
.org_wrap .org_dep2 > ul > li:before{ content:""; position:absolute; top:0; width:calc(50% + 0.25rem); border-top:1px solid #ccc; }
.org_wrap .org_dep2 > ul > li:first-of-type:before{ left:50%;}
.org_wrap .org_dep2 > ul > li:last-of-type:before{ right:50%;}
.org_wrap .org_dep2 > ul > li.col-8{ flex: 5;}
.org_wrap .org_dep2 > ul > li.col-4{ flex: 3;}
.org_wrap .org_dep3{ position:relative; flex: 1;}
.org_wrap .org_dep3:before{ content:""; position:absolute; top:0; border-top:1px solid #ccc; }
.org_wrap li.col-8 .org_dep3:before{ left:5%; width:calc(90% + 0.15rem);}
.org_wrap li.col-4 .org_dep3:before{ left:12%; width:76%;}
.org_wrap .org_dep3 > ul{ display: flex; gap: 0 0.5rem;}
.org_wrap .org_dep3 > ul > li{ position:relative; flex: 1; min-width:0px; padding-top:1.5rem;}
.org_wrap .org_dep3 > ul > li:before{ content:""; position:absolute; left:50%; top:0; height:1.5rem; border-right:1px solid #ccc; }
.org_wrap .org_dep3 > ul > li span{ display: flex; height:3rem; line-height:1.3; color:#111; font-size: 0.75rem; padding:0 0.25rem; align-items: center; justify-content: center; text-align: center; border-radius:0.25rem; border:1px solid #ccc; background:#fff;}

/* 절차도 */
.step_wrap{ display: flex; flex-wrap: wrap; gap:2rem 1.5rem; justify-content: center;}
.step_wrap .step{ flex:1; max-width:50%;}
.step_wrap .step > ul { position:relative;}
.step_wrap .step > ul:before { content:""; position:absolute; left:2.5rem; top:2.5rem; height:calc(100% - 5rem); border-left:1px solid #ccc;}
.step_wrap .step > ul > li{ position:relative; display: flex; align-items: center; gap: 0 1rem;}
.step_wrap .step > ul > li + li{ margin-top:2rem;}
.step_wrap .step .titWr{ min-width:5rem; min-height:5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius:50%; background:#f5f9f8; font-size:0.75rem; line-height:1.2; color:#1b4a01;}
.step_wrap .step .titWr strong{ font-size:1.5rem; font-weight: 700; line-height:1;}
.step_wrap .step .conWr{ position:relative; flex:1; display: flex; flex-wrap: wrap; min-width:0px; min-height:5rem; align-items: center; justify-content: center; gap: 0 1rem; padding:0.5rem 1.5rem; border-radius:2.5rem; border:2px solid #1b4a01; color:#000;}
.step_wrap .step .conWr p{ font-weight: 600; text-align: center;}
.step_wrap .step .conWr span{ border-radius:1.5rem; background:#f5f9f8; font-size:0.8rem; padding:0.5rem 1rem;}
.step_wrap .step > ul > li + li .conWr:before{ content:"\F2E1"; position:absolute; left:50%; top:-2rem; font-family: 'remixicon'; font-size:1.25rem; color:#000; transform: translateX(-50%);}
.step_wrap .step > ul > li.prcd_fin .titWr,
.step_wrap .step > ul > li.prcd_fin .conWr{ background:#1b4a01; color:#fff;}

/* 퀵메뉴 */
.quicklink{ position:fixed; right:1.75rem; top:24rem; width:5.5rem; padding:0.5rem 0.35rem; border-radius:0.5rem; text-align: center; z-index: 99; background:#c5d700 url('/images/web/pocenter/main/bg_quicklink.png') no-repeat center/cover; }
.quicklink h3{ font-size: 0.8rem; font-weight: 600; color:#000; line-height:1.3;}
.quicklink h3 strong{ display: block; font-size: 1rem; font-weight: 700;}
.quicklink p{ border-radius:0.25rem; line-height:0; padding:5px 0; text-align: center; background:#fff; margin-top:0.5rem;}

/* footer */
#footer { padding-bottom:9rem;}
#footer .foot_address .inr{ display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;}

@media screen and (max-width: 1770px){	
	/* 퀵메뉴 */                   
    .quicklink{ top:auto; bottom: 1rem;}
}

@media (max-width: 1480px) {	

	#footer .footer_link .sns-wrap{ margin-top:1rem;}
}

@media screen and (max-width:1440px) {
    /* 지식재산권 현황 */
    .inteProp_wrap > ul { width: calc(100% + 1rem); margin-left: -0.5rem; }
    .inteProp_wrap > ul > li { width: calc(50% - 1rem); margin: 0.5rem; padding: 1rem;}
}
@media screen and (max-width:1380px) {
    /* 조직도 */
    .org_wrap .org_dep3 > ul > li{ word-break: break-all;}
}
@media screen and (max-width:1240px) {
    /* 절차도 */
    .step_wrap .step{ max-width:80%;}

    /* 조직도 */
    .org_wrap .org_dep3 > ul > li{ word-break: keep-all;}
}
@media screen and (max-width:1024px) {
    /* 조직도 */
    /* .organ.rsp_img::before { width: 20rem; height: 6.1rem; }
    .organ.rsp_img::after { width: 10rem; height: 9rem;} */

    /* 조직도 */
    .org_wrap::before { width: 20rem; height: 6.1rem; }
    .org_wrap::after { width: 10rem; height: 9rem;}
    .org_wrap h3{ padding-bottom:0;}
    .org_wrap h4{ padding-bottom:0.5rem;}
    .org_wrap .org_dep2 > ul{ flex-direction: column; }
    .org_wrap .org_dep2 > ul > li:before{ display: none;}
    .org_wrap .org_dep3{ border-radius:0.5rem; border:3px solid #eee; padding:1rem; background:#f8f8f8;}
    .org_wrap .org_dep3:before{ display: none;}
    .org_wrap .org_dep3 > ul > li{ padding-top:0;}
    .org_wrap .org_dep3 > ul > li:before{ display: none;}

    #footer .footer_content{ flex-direction: column;}
    #footer .footer_link .sns-wrap{ justify-content: left;}
    .family-site{ top:auto; bottom:0;}

	/* 퀵메뉴 */                   
    .quicklink{ display: none;}

    /* footer */
    #footer { padding-bottom:0;}
}
@media screen and (max-width:880px) {
    /* 지식재산권 현황 */ 
    .inteProp_wrap > ul > li { width: calc(100% - 1rem); }

    /* 조직도 */
    /* .organ.rsp_img::before,
    .organ.rsp_img::after { display: none;} */
    .org_wrap::before,
    .org_wrap::after { display: none;}
    .org_wrap .org_dep3 > ul{ flex-wrap: wrap; gap: 0.5rem;}
    .org_wrap .org_dep3 > ul > li{ width:calc(25% - 0.4rem); flex: auto;}

    /* 절차도 */
    .step_wrap .step{ flex:auto; width:100%; max-width:100%;}
    .step_wrap .step + .step{ padding-top:2rem; border-top:1px dashed #ccc;}
}

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

    /* 절차도 */
    .step_wrap .step > ul:before{ left:2rem;}
    .step_wrap .step .titWr{ min-width:4rem; min-height:4rem;}
    .step_wrap .step .titWr strong{ font-size: 1.2rem;}
    .step_wrap .step .conWr{ min-height:4rem;}
    .step_wrap .step .conWr span{ border-radius:1rem; padding:0.5rem; text-align: center;}

    #footer .footer_content{ gap: 0;}
    

    .box_ty1{ gap: 1.5rem;}
    .box_ty1 .img{ width: 12rem; height: 12rem; padding:0.5rem;}

}

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

    .quicklink{ width: 4.5rem; right: 0.75rem; bottom: 0.75rem; padding:5px;}
    .quicklink h3{ font-size: 0.7rem;}
    .quicklink h3 strong{ font-size: 0.8rem;}
    .quicklink p{ padding: 5px; margin-top:5px;} 
    .quicklink p img{ max-width: 100%;}

    .family-site{ position:relative; height:32px; right:auto; bottom:auto;}

    .box_ty1{ flex-direction: column; min-height:0px;}
    .box_ty1 .img{ width: 100%; height: 12rem; }
    .box_ty1 .img img{ max-height:100%; }
    .box_ty1 .cont{ padding-top:0; }
}

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

    [class^="imgTxt_st"] > ul > li > .imgWr{ width: 100%;}

}

@media screen and (max-width:420px) {
    /* 지식재산권 현황 */ 
    .inteProp_wrap > ul > li { flex-direction: column; align-items: center; }
    .inteProp_wrap .txt { width: 100%; padding-left: 0; margin-top: 1rem;}

    /* 절차도 */
    .step_wrap .step > ul:before{ left:1.5rem;}
    .step_wrap .step > ul > li{ gap: 0 0.5rem;}
    .step_wrap .step .titWr{ min-width:3.5rem; min-height:3.5rem; font-size:0.65rem;}
    .step_wrap .step .titWr strong{ font-size: 1.1rem;}
    .step_wrap .step .conWr{ min-height:3.5rem; border-radius:1rem; padding:0.5rem 1rem;}

    /* 조직도 */
    .org_wrap .org_dep3{ padding:0.75rem;}
    .org_wrap .org_dep3 > ul > li{ width:calc(50% - 0.25rem); flex: auto;}

    .map_Info .bscInfr ul li{ flex-direction: column; margin-top: 0.5rem;}

}

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

    #footer .footer_link .sns-wrap{ flex-wrap: wrap;}
    #footer .footer_link .sns-wrap h5{ width:100%;}
    #footer .footer_link .sns-wrap + .sns-wrap{ margin-top:1rem;}

}