@import url('sub.css');
/* 공통 */
.tit_wrap .dots {margin-top:25px}

/* 인사말 */
#greeting {padding-top:94px}
#greeting .greeting_cont {display:flex; align-items:center; justify-content:space-between; gap:65px}
#greeting .greeting_cont .imgbox {max-width:545px; width:45%; flex-shrink:0}
#greeting .greeting_cont .imgbox img {width:100%; height:auto}
#greeting .greeting_cont .imgbox img:first-child {margin-bottom:10px}
#greeting .tbox .fs40 {color:var(--black); font-weight:400; margin-bottom:8px}
#greeting .tbox .fs26 {color:var(--black)}
#greeting .tbox .tbox_mid .fs20 {color:var(--basic2)}
#greeting .tbox .tbox_bot {display:flex; align-items:flex-end; gap:5px 10px; flex-wrap:wrap;}
#greeting .tbox .tbox_bot p {color:var(--black)}
#greeting .tbox .tbox_bot p:not(.fs20) {font-weight:600; font-size:1.5rem; line-height: 146.667%;}
#greeting .tbox .tbox_mid {margin:25px 0}

/* 조직 */
#organ .tit_wrap {margin-bottom:40px}
#organ .toptxt p.fs20 {color:var(--basic2)}
#organ .topimg {width:100%;}
#organ .topimg img {width:100%; height:auto}

#organ .organ_wrap {padding-top:40px}
#organ .organ_wrap > p.fs40 {color:var(--black); margin-bottom:80px}

#organ .organ_pic {}
#organ .organ_pic .ceo {width:200px; aspect-ratio:1/1; background:var(--main); color:var(--white); display:flex; align-items:center; justify-content:center; border-radius:50%; font-weight:700; font-size: 1.4rem; line-height: 142.857%; margin:0 auto 50px; position:relative; }
#organ .organ_pic .ceo::before {position:Absolute; content:""; bottom:-162px; height:162px; width:1px; opacity: 0.3; background: var(--black); left:50%; transform:translateX(-50%);}
#organ .organ_pic .rnd_wrap {display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:70px}
#organ .organ_pic .rnd {max-width:280px; min-height:65px; border-radius: 15px; background: var(--black, #111); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:600; margin-bottom:97px; position:relative; left:5px; text-align:center; padding:5px; line-height:1.5}
#organ .organ_pic .rnd br {display:none}
#organ .organ_pic .rnd::before {position:Absolute; content:""; top:50%; height:1px; width:39px; opacity: 0.3; background: var(--black); left:-39px; transform:translateY(-50%);}
#organ .organ_pic .sub {display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:30px; position:relative}
#organ .organ_pic .sub::before {position:absolute; left:50%; width:calc(((100% + 30px) / 4)* 3); height:1px; background:var(--black); content:""; top:-50px; transform:translate(-50%, 0); opacity:0.3}
#organ .organ_pic .sub dl {position:relative; display:flex; flex-direction:column}
#organ .organ_pic .sub dl::before {position:absolute; left:50%; width:1px; height:50px; background:var(--black); content:""; top:-50px; transform:translate(-50%, 0); opacity:0.3}
#organ .organ_pic .sub dl:first-child::before {left:157px; transform:none}
#organ .organ_pic .sub dl:last-child::before {left:auto; right:157px; transform:none}
#organ .organ_pic .sub dl dt {display: flex; padding: 12px; justify-content: center; align-items: center; border-radius: 15px 15px 0 0; background: var(--basic); color:var(--white); font-weight:600; text-align:center; min-height:80px; line-height:1.5}
#organ .organ_pic .sub dl dd {padding: 14px 20px 20px; border-radius: 0 0 15px 15px; border:1px solid var(--basic); border-top:0; flex:1}
#organ .organ_pic .sub dl dd ul li {text-align:left; color:var(--basic2); line-height:138.889%; position:relative; padding:6px 0; padding-left:10px; border-bottom:1px dashed var(--border)}
#organ .organ_pic .sub dl dd ul li:last-child {padding-bottom:0; border-bottom:0}
#organ .organ_pic .sub dl dd ul li::before {content:""; width:3px; height:3px; background:var(--basic); opacity:0.8; position:absolute; top:17px; left:0;}

/* 인증특허신기술 */
#certi {overflow:hidden}
#certi .tit_wrap {position:relative}
#certi .tit_wrap h4 {position:relative; padding:0 50px}
#certi .swiper_btn_wrap {display:flex; gap:10px; position:absolute; left:0; top:calc(50% + 2px); width:100%; justify-content:space-between; transform:translateY(-50%);}
#certi .swiper_btn_wrap .swiper_btn {display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.3s linear; opacity:0.3;}
#certi .swiper_btn_wrap .swiper_btn::before {content:"\e5e1"; font-family:var(--icon); font-size:45px; line-height:1; font-weight:200; color:var(--black); opacity:0.8;}
#certi .swiper_btn_wrap .swiper_btn.prev {transform:rotate(180deg)}
#certi .swiper_btn_wrap .swiper_btn:hover {opacity:0.8}

#certi .certi_cont {margin-top:70px;}
#certi .swiper {overflow:visible}
#certi .certi_list a > .imgbox {background:url('/about/img/certi_bg.jpg') center / cover no-repeat; display:flex; align-items:flex-end; justify-content:center; margin-bottom:25px; overflow:hidden; position:relative;}
#certi .certi_list a > .imgbox img {width:220px; max-width:80%; aspect-ratio:220 / 311; filter: drop-shadow(5px 5px 30px rgba(0, 0, 0, 0.08)); margin-top:39px}
#certi .certi_list a > .imgbox::before {content:""; width:100%; height:100%; position:absolute; top:0; left:0; background:var(--black); opacity:0; z-index:2; transition:all 0.4s linear}
#certi .certi_list a > .imgbox::after {font-family:var(--icon); font-size:25px; line-height:1; display:flex; align-items:center; justify-content:center; color:var(--white); content:"\e8b6"; width:60px; aspect-ratio:1/1; position:absolute; top:50%; left:50%; z-index:3; transform:translate(-50%, -50%); background:var(--main); border-radius:50%; opacity:0; transition:all 0.4s linear}
#certi .certi_list a > .tbox {text-align:center}
#certi .certi_list a > .tbox span.cat {color:var(--main);}
#certi .certi_list a > .tbox h5.fs18 {color:var(--black); font-weight:400}

#certi .certi_list a:hover .imgbox::before {opacity:0.8}
#certi .certi_list a:hover .imgbox::after {opacity:1}

#certi .popup {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:999999999; min-width:440px; display:none;}
#certi .popup_h {display:flex; justify-content:space-between; align-items:center; padding:15px 20px; border-radius:15px 15px 0 0; background:var(--main);}
#certi .popup_h .close{display:flex; cursor:pointer}
#certi .popup_h span.cat {color:var(--white); opacity:0.8}
#certi .popup_h h5.fs20 {color:var(--white); font-weight:600}
#certi .popup_cont {padding:30px; background:var(--white); border-radius:0 0 15px 15px; display:flex; align-items:center; justify-content:center}
#certi .popup_cont img {max-width:100%; max-height:calc(var(--vh) * 0.6)}


#certi .more_wrap {display:flex; justify-content:center; margin-top:50px}


/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
#greeting .tbox .tbox_mid br {display:none}

/* 조직 */
#organ .toptxt p.fs20 br {display:none}
#organ .fs18 br {display:none}
#organ .organ_pic .ceo::before {height:152px; bottom:-152px}
#organ .organ_pic .rnd_wrap {grid-gap:50px}
#organ .organ_pic .rnd {min-height:55px}
#organ .organ_pic .rnd::before {width:30px; left:-30px}
#organ .organ_pic .sub {grid-gap:50px}
#organ .organ_pic .sub::before {width:calc(((100% + 50px) / 4)* 3);}
#organ .organ_pic .sub dl:first-child::before {left:50%; transform:translate(-50%, 0);}
#organ .organ_pic .sub dl:last-child::before {left:50%; right:auto; transform:translate(-50%, 0);}
#organ .organ_pic .sub dl dd ul li {font-size:0.8rem}
#organ .organ_pic .sub dl dd ul li::before {top:15px}
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 공통 */
.tit_wrap .dots {margin-top:15px}

/* 인사말 */
#greeting .greeting_cont {gap:40px; align-items:flex-start;}
#greeting .tbox .tbox_mid {margin:20px 0}
#greeting .tbox .fs26 br {display:none}

/* 조직 */
#organ .tit_wrap {margin-bottom:30px}
#organ .organ_wrap > p.fs40 {margin-bottom:60px}
#organ .organ_pic .ceo {width:170px; margin-bottom:30px}
#organ .organ_pic .ceo::before {height:134px; bottom:-134px}
#organ .organ_pic .rnd {border-radius:10px; margin-bottom:70px}
#organ .organ_pic .rnd br {display:block}
#organ .organ_pic .rnd_wrap {grid-gap:30px}
#organ .organ_pic .rnd::before {width:20px; left:-20px}
#organ .organ_pic .sub {grid-gap:10px}
#organ .organ_pic .sub::before {width:calc(((100% + 10px) / 4)* 3); top:-30px}
#organ .organ_pic .sub dl::before {height:30px; top:-30px}
#organ .organ_pic .sub dl dt {padding:12px; min-height:120px}
#organ .organ_pic .sub dl dd {padding:9px 15px 15px}
#organ .organ_pic .sub dl dd ul li {line-height:1.45}
#organ .organ_pic .sub dl dd ul li::before {top:16px}

/* 인증특허신기술 */
#certi .more_wrap {margin-top:30px}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 인사말 */
#greeting {padding-top:70px}
#greeting .greeting_cont {flex-direction:column-reverse; gap:30px;}
#greeting .greeting_cont .imgbox {max-width:100%; width:100%; display:flex; gap:10px}
#greeting .greeting_cont .imgbox img {width:calc((100% - 10px) / 2);}
#greeting .greeting_cont .imgbox img:first-child {margin-bottom:0}

#greeting .tbox .fs40 {margin-bottom:5px}
#greeting .tbox .tbox_bot {gap:6px}
#greeting .tbox .tbox_bot p:not(.fs20) {font-size:1.3rem}
#greeting .tbox .tbox_bot p.fs20 {line-height:145%}

/* 조직 */
#organ .organ_wrap {padding-top:20px}
#organ .tit_wrap {margin-bottom:20px}
#organ .organ_wrap > p.fs40 {margin-bottom:40px}
#organ .organ_pic .ceo::before {height:105px; bottom:-105px}
#organ .organ_pic .ceo {width:140px}
#organ .organ_pic .rnd {height:45px; left:18px; margin-bottom:50px}
#organ .organ_pic .rnd::before {width:23px; left:-23px}
#organ .organ_pic .rnd_wrap {grid-gap:10px}
#organ .organ_pic .sub {grid-gap:10px}
#organ .organ_pic .sub::before {width:calc(((100% + 10px) / 4)* 3);}
#organ .organ_pic .sub dl dt {border-radius:10px 10px 0 0; padding:10px; min-height:100px}
#organ .organ_pic .sub dl dd {border-radius:0 0 10px 10px; padding:5px 10px 10px}
#organ .organ_pic .sub dl dd ul li {font-size:14px; padding:5px 0; padding-left:8px}
#organ .organ_pic .sub dl dd ul li::before {top:13px}

/* 인증특허신기술 */
#certi .certi_cont {margin-top:50px}
#certi .popup_h .close img {width:35px; height:auto}
#certi .tit_wrap h4 {padding:0 45px}
#certi .swiper_btn_wrap {top:50%; transform:translateY(-50%)}
#certi .swiper_btn_wrap .swiper_btn::before {font-size:40px}
#certi .certi_list a > .imgbox {margin-bottom:15px}
#certi .more_wrap {margin-top:20px}

}

/*******************************************************************************
    @media  ~768px               
*******************************************************************************/
@media all and (max-width:768px){
/* 탭 스타일 */
.page_tab ul {justify-content:flex-start !important; box-sizing:border-box; gap:0 !important; width:fit-content; margin-left:auto; margin-right:auto}
.tab li a {margin:0 10px}

/* 조직 */
#organ .organ_pic_wrap {overflow-x:scroll; padding:20px 0}
#organ .organ_pic {width:800px}
#organ .scroll_drag_guide {display:flex;}
}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* 인사말 */
#greeting {padding-top:60px}
#greeting .greeting_cont .imgbox {gap:5px}
#greeting .greeting_cont .imgbox img {width:calc((100% - 5px) / 2);}
#greeting .tbox .fs40 {margin-bottom:0}

/* 조직 */
#organ .organ_wrap {padding-top:0}
#organ .organ_wrap > p.fs40 {margin-bottom:30px}
#organ .organ_pic {width:700px}

/* 인증특허신기술 */
#certi .tit_wrap h4 {padding:0 40px}
#certi .certi_cont {margin-top:40px}
#certi .swiper_btn_wrap .swiper_btn::before {font-size:35px} 
#certi .popup {min-width:70vw}
#certi .popup_h {border-radius:10px 10px 0 0; padding:15px}
#certi .popup_cont {border-radius:0 0 10px 10px; padding:15px}
}
/*******************************************************************************
    @media ~480px             
*******************************************************************************/
@media all and (max-width:480px){
/* 인사말 */
#greeting .greeting_cont .imgbox {display:block}
#greeting .greeting_cont .imgbox img {width:100%;}
#greeting .greeting_cont .imgbox img:first-child {margin-bottom:5px}

#certi .popup {min-width:85vw} 


}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

}