@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:10px}
#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%; letter-spacing: -1.5px;}
#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%; letter-spacing: -1.4px; 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; 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}
#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:70px; 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: 15px; justify-content: center; align-items: center; border-radius: 15px 15px 0 0; background: var(--basic); color:var(--white); font-weight:600;}
#organ .organ_pic .sub dl dd {padding: 20px 15px; 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:center; color:var(--basic2)}
#organ .organ_pic .sub dl dd ul li + li {margin-top:8px}

/* 인증특허신기술 */
#certi {overflow:hidden}
#certi .tit_wrap {position:relative}
#certi .swiper_btn_wrap {display:flex; gap:10px; position:relative; top:2px; position:absolute; left:0; top:50px; width:100%; justify-content:space-between}
#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) translateY(1px)}
#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.fs20 {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 .organ_pic .ceo::before {height:152px; bottom:-152px}
#organ .organ_pic .rnd_wrap {grid-gap:50px}
#organ .organ_pic .rnd {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);}
}

/*******************************************************************************
    @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}

/* 조직 */
#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:126px; bottom:-126px}
#organ .organ_pic .rnd {border-radius:10px; margin-bottom:70px}
#organ .organ_pic .rnd_wrap {grid-gap:30px}
#organ .organ_pic .rnd::before {width:20px; left:-20px}
#organ .organ_pic .sub {grid-gap:30px}
#organ .organ_pic .sub::before {width:calc(((100% + 30px) / 4)* 3); top:-30px}
#organ .organ_pic .sub dl::before {height:30px; top:-30px}
#organ .organ_pic .sub dl dt {padding:12px}
#organ .organ_pic .sub dl dd {padding:15px 10px}

/* 인증특허신기술 */
#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:96px; bottom:-96px}
#organ .organ_pic .ceo {width:140px}
#organ .organ_pic .rnd {height:45px; left:18px; margin-bottom:50px}
#organ .organ_pic .rnd::before {width:25px; left:-25px}
#organ .organ_pic .rnd_wrap {grid-gap:15px}
#organ .organ_pic .sub {grid-gap:15px}
#organ .organ_pic .sub::before {width:calc(((100% + 15px) / 4)* 3);}
#organ .organ_pic .sub dl dt {border-radius:10px 10px 0 0; padding:10px}
#organ .organ_pic .sub dl dd {border-radius:0 0 10px 10px; padding:10px}
#organ .organ_pic .sub dl dd ul li {font-size:15px}
#organ .organ_pic .sub dl dd ul li + li {margin-top:5px}

/* 인증특허신기술 */
#certi .certi_cont {margin-top:50px}
#certi .popup_h .close img {width:35px; height:auto}
#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){
/* 조직 */
#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 {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){

}