/*sub*/
.noemail .box {
    border: 10px solid #f0f0f0;
    padding: 20px 3%;
}

.noemail .box h1 {
    font-size: 1.5em;
    font-weight: 600;
}
.tlt-de{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    padding-left: 12px;
    /* color: var(--main-color); */
}
.tlt-de span{font-size:0.8em; color:#555; margin-left:3px;}
.tlt-de:after{
    display:block;
    clear:both;
    content:"";
    width: 4px;
    height: 23px;
    background: var(--main-color);
    position: absolute;
    top: 5px;
    left: 0;
}
.tlt-de:before{
    display:block;
    clear:both;
    content:"";
    width: 4px;
    height: 7px;
    background: var(--point-color);
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 1;
}
.tlt-de .right{
    display: block;
    font-size: 14px;
    color: var(--main-color);
}
.tlt-de2{
    color: var(--point-color);
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
}
.txt-de2{
    background: #f0f1f7;
    border-radius: 20px;
    padding: 10px;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
}
@media all and (min-width: 1080px) {
  .noemail .box {
        padding:30px;
    }
}

.privacy h4 {
    font-size: 1.25em;
    font-weight: 500;
}
/*사이트맵*/
#sub .sitemap ul {display:flex; flex-wrap:wrap; align-items:flex-start; gap:40px;}
#sub .sitemap li {width: 100%;display:flex;flex-wrap:wrap;}
#sub .sitemap li > a{
    width: 100%;
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: 20px;
    text-align: center;
    display: block;
    background: var(--main-color);
    border-radius: 10px;
    color: #fff;
    padding: 10px 0;
}
#sub .sitemap li h1 {width:100%; font-weight:700; color:var(--col01); margin:0 0 20px;}
#sub .sitemap li .sub {width:100%;}
#sub .sitemap li .sub a {display:block;}
#sub .sitemap li .sub dd {border: 1px solid #dedede;padding:10px;border-radius:8px;}
#sub .sitemap li .sub dd:not(:last-of-type) {margin-bottom:10px;}
#sub .sitemap li .sub dd > a {font-weight:600; padding:0 5px;}
#sub .sitemap li .sub dd div {margin:10px 0 0; background:var(--lbg); padding:10px; border-radius:8px;}
#sub .sitemap li .sub dd div a {opacity:0.8; font-size:0.95em; margin:5px 0;}
#sub .sitemap li .sub dd div a:before {content:'·'; margin-right:0.25em;}

@media all and (min-width:768px) {
  #sub .sitemap li {width: calc(31.33% - 30px);}
  #sub .sitemap li h1 {font-size:1.1em;}
}

@media all and (min-width:1200px) {
  #sub .sitemap li {width: calc(20% - 32px);}
}

.sub_tlt {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 10px;
}

.sub_tlt:before {
    display: block;
    clear: both;
    content: "";
    width: 22px;
    height: 3px;
    background: #009fe3;
    margin-bottom: 7px;
}

.sub_tlt2 {
    color: #009fe3;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}

.mt {
    margin-bottom: 50px;
}

.mt2 {
    margin-bottom: 20px;
}

.more.down {
    border: 1px solid #dedede;
    border-radius: 0px;
    width: 100%;
    line-height: 59px;
    padding-left: 15px;
    color: #444;
}

@media all and (min-width: 768px) {
  .sitemap li {
        width: 22.33%;
        float: left;
        /* margin: 0 1% 30px; */
    }

  .sitemap li:nth-child(3n+1) {
        clear: both;
    }

    .sub_tlt {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .mt {
    }

    .more.down {
        max-width: 300px;
        line-height: 70px;
        height: 70px;
        font-size: 16px;
        padding-left: 20px;
        transition: 0.3s;
    }

    .more.down:before {
        right: 23px;
        top: 30px;
        /* border-top: 2px solid #222; */
        /* border-right: 2px solid #222; */
    }

    .more.down:after {
        top: 33px;
        right: 23px;
    }

    .more.down:hover {
        background: #009fe3;
        color: #fff;
        border-color: #009fe3;
    }

    .more.down:hover:after {
        background: #fff;
    }

    .more.down:hover:before {
        border-color: #fff;
    }
    .tlt-de{
    font-size: 28px;
}
    .tlt-de:after{
    height: 28px;
}
    .tlt-de:before{
    height: 8px;
}
    .tlt-de .right{
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 0;
}
}

@media all and (min-width: 1200px) {
  .sitemap ul {
        display:flex;
        flex-wrap: wrap;
    }

  .sitemap li h1 {
        font-size: 1.25em;
    }

    .sub_tlt {
        font-size: 30px;
        margin-bottom: 25px;
    }

    .sub_tlt:before {
        content: "";
        width: 30px;
        height: 3px;
    }

    .mt {
        margin-bottom: 80px;
    }

    .mt2 {
        margin-bottom: 20px;
    }

    .more.down {
    }
    .tlt-de{
    font-size: 30px;
    padding-left: 15px;
    margin-bottom: 20px;
}
    .tlt-de:before{
    height: 10px;
    top: 9px;
    width: 5px;
}
    .tlt-de:after{
    top: 9px;
    height: 26px;
    width: 5px;
}
    .tlt-de .right{
    font-size: 20px;
}
.tlt-de2{
    font-size: 24px;
}
.txt-de2{
    font-size: 18px;
    max-width: calc(100% - 600px);
    /* text-align: left; */
    /* padding-left: 20px; */
}
}

/*overview*/

.overview {
}

.txt-de {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
  /* text-align: center; */
  font-weight: 600;
  display: none;
}

.txt-de span {
  display: block;
  font-weight: 800;
  margin-top: 8px;
  color: var(--main-color); /* 강조 컬러 */
}

.overview .box {
  /* display: flex; */
  flex-direction: column;
  /* align-items: center; */
}

.overview .img {
  width: 100%;
  /* max-width: 300px; */
  margin-bottom: 20px;
}

.overview .img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* border-radius: 20px 50px; */
}

.overview .ov-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  /* max-width: 400px; */
}

.overview .ov-list li {
  padding: 15px 0;
  border-bottom: 1px solid #ebebeb;
  padding-left: 52px;
  position: relative;
  width: 100%;
}
.overview .ov-list li:after{
    display:block;
    clear:both;
    content:"";
    /* width: 25px; */
    /* height: 25px; */
    font-family: 'Material Symbols Outlined', sans-serif;
    color: var(--point-color);
    font-size: 29px;
    position: absolute;
    top: 18px;
    left: 7px;
    color: var(--main-color);
    /* background: #f8f8f8; */
    }
.overview .ov-list li.o1:after{content: '\e7fd';}
.overview .ov-list li.o2:after{content: '\ebcc';}
.overview .ov-list li.o3:after{content: '\f233';}
.overview .ov-list li.o4:after{content: '\e99e';}
.overview .ov-list li.o5:after{content: '\e0c8';}
.overview .ov-list strong {
  font-weight: 600;
  color: var(--point-color);
  font-size: 14px;
  color: var(--main-color);
}

.overview .ov-list em {
  font-weight: 500;
  display: block;
}

/* 📱 태블릿 이상 반응형 대응 */
@media (min-width: 768px) {
  .overview .box {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    display: flex;
  }

  .overview .img {
    max-width: 40%;
    margin-bottom: 0;
  }

  .overview .ov-list {
    max-width: 55%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 1280px) {
    .overview .ov-list strong{
    font-size: 18px;
}
    .overview .ov-list li{
    width: 50%;
    border-bottom: 0px;
    padding-left: 100px;
    margin-bottom: 35px;
}
    .overview .ov-list li:last-child{width:100%;}
    .overview .ov-list em{
    font-size: 20px;
}
.txt-de{
    display: block;
    font-size: 36px;
    /* text-align: center; */
    margin-bottom: 80px;
    line-height: 1.3;
}
    .overview .ov-list li:after{
    font-size: 35px;
    background: #f8f8f8;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: end;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 5px;
    left: 0px;
}
    .overview .img img{
    border-radius: 20px 120px;
}
    .overview .ov-list{
    /* margin-top: 62px; */
}
    .overview .box{
    display: flex;
    flex-direction: row-reverse;
}
    .overview .img{
    margin-top: -134px;
    position: relative;
}
    .overview .img:after{
        display:block;
        clear:both;
        content:"";
        width: 400px;
        height: 300px;
        position: absolute;
        background: #0900870d;
        top: -46px;
        left: -53px;
        z-index: -1;
        border-radius: 50px;
    }
}










.history .txt-de{/* text-align:center; */}

/*연혁*/
.cont_his{position:relative}
.cont_his:after{content:''; display:block; clear:both;}
.cont_his .history_top:after{content:'SINCE 1946'; position:absolute; right:0; top:0; z-index:0; line-height:100%; font-size:2.2em;  font-weight:900; color:#f0f0f0}
.cont_his .history_top .tit_cm{position:relative; z-index:5;}

.history_tit{font-size: 1.4em; font-family: var(--font-eng); text-transform: uppercase; font-weight: 700;  color: var(--main_color);}
.history_tit span{font-size: 0.6em; display: block; color: var(--gr_color); word-break: keep-all;}
.history_img video{width:100%}
.his_cont ul {position:relative;}
.his_cont ul li {position:relative;}
.his_cont ul li h4 {padding-left:40px;position:relative;font-family: var(--font-eng);color: var(--point-color);font-weight:700;display:block;padding:10px 0 10px 50px;font-size:1.4em;margin-top:15px;}
.his_cont ul li h4:before {position:absolute;display:block;content:'';left:0;top:12px;width:24px;height:24px;background: var(--point-color);border-radius:50%;-webkit-border-radius:50%;opacity:0.2;}
.his_cont ul li h4:after {position:absolute;display:block;content:'';left:0;top:12px;width:24px;height:24px;background: var(--point-color);border-radius:50%;-webkit-border-radius:50%;transform:scale(0.3);}
.his_cont ul li ol {position:relative; margin-left:50px;  }
.his_cont ul li ol:before {position:absolute;display:block;content:'';left:-38px;top:0;width:1px;height:100%;background: var(--main-color);opacity:0.2;}
.his_cont ul li ol li {position:relative;  margin-bottom:10px; }
.his_cont ul li ol li:last-child {margin-bottom:0px;}
.his_cont ul li ol li .month {font-weight:700; color:#000000; color:var(--main_color); display:block }
.his_cont ul li .photo{margin-top:30px; border-radius:0 30px 0 0; overflow:hidden; /* webkit-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.2);
box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.2);*/}


.history_scroll{position:relative; display:flex; flex-wrap:wrap;}
.history_scroll li{width:50%; }
.history_scroll li a{display:block; padding:10px 0px; color:#808080; font-size:0.9em; font-weight:600;  text-align:center; border-bottom:3px solid #f0f0f0} 
.history_scroll li:first-child a{color:var(--main_color); border-bottom-color:var(--main_color); font-weight:700}
.history_scroll li span{font-size:0.6em; display: none;}

@media all and (min-width:860px) {

.cont_his .history_top .tit_cm{font-size:2.3em}
.cont_his .history_top:after{font-size:4em;}

.his_cont ul{margin-bottom:30px}
.his_cont ul:after{content:''; clear:both; display:block}
.his_cont ul li ol:before{left:-50px}
.his_cont ul li h4:before{left:-11px}
.his_cont ul li h4:after{left:-11px}


.his_cont ul li .photo{width:40%; float:left; margin-right:10%}
/*
.his_cont ul li .hisbox{width:50%;}*/
.his_cont ul.left li .hisbox{margin-left:40%}

.his_cont ul.right li .photo{ float:right; margin-right:0%; margin-left:5%}
.his_cont ul.right{text-align:right}
.his_cont ul.right li ol{margin-left:0; margin-right:50px}
.his_cont ul.right li h4 {padding-left:0px;  padding:10px 50px 10px 0px; margin-bottom:30px}

.his_cont ul.right  li h4:before {left:auto; right:-11px; }
.his_cont ul.right  li h4:after {left:auto; right:-11px }
.his_cont ul.right li ol:before{left:auto; right:-50px;  }

.his_cont .info img{border-radius: 0 0 0 50px}


.history_scroll li{width:24%}
.history_scroll li span{display: block;}

.history_tit{font-size: 2.4em;}

}

@media all and (min-width:1200px) {

.cont_his .history_top:after{font-size:8em}
.history_scroll li a{font-size:1.2em}


.his_cont ul li h4{font-size:2em; margin-bottom:35px; margin-top:0}
.his_cont ul li h4:before {top:20px;}
.his_cont ul li h4:after {top:20px}
.his_cont ul li ol li .month{ position:absolute; right:0; top:0; width:50px;  }
.his_cont ul li ol li{margin-bottom:20px; padding-right:50px;}
.his_cont ul.left li ol li{padding-right:0;padding-left: 65px;font-size: 18px;}
.his_cont ul.left li ol li .month{right:auto; left:0;}

.history_scroll li a{ padding:20px 0px;}
}








/*조직도*/
.organization{text-align:center;position:relative;/* max-width:1300px; */margin:0 auto;min-width: 600px;}
.organization:before{content:''; width:1px; height:310px; left:0; right:0; top:0; margin:auto;  position:absolute; display:block; background:#ecebe8}
.organization .ordep{position:relative; margin-bottom:30px;}

.organization .ordep.or01{margin-bottom:50px}
.organization .ordep.or02{margin-bottom:50px}
.organization .ordep .orhd{display:block;padding:15px 5px;background:#808080;color:#ffffff;position:relative;font-weight:600;z-index:1;word-break: keep-all;border-radius: 10px;}

.organization .ordep .orhd span{display:block; font-size:0.8em}
.organization .ordep:after{content:''; display:block; clear:both;}
.organization .or01 .orhd{background: var(--main-color);padding:15px 0px;font-size:1.2em;width:180px;left:50%;margin-left:-90px;}
.organization .or02 .orhd{background:#dd3838;  }

.organization .ordep.or03{margin-bottom:50px}
.organization .or03 .orhd{background: var(--point-color);}
.organization .or04 .orhd{background: #444;}

.organization .ordep .orhd:before{position: absolute; top: -6px; left: 50%; margin-left: -6px; display: block; content: ''; width: 5px; height:5px; border:3px solid #ffffff;  background-color: #ecebe8; -webkit-border-radius: 100%; }
.organization .or01 .orhd:before{background: var(--main-color);top:auto;bottom:-6px}
.organization .or02 .orhd:before{background:#dd3838; top:50%; left:0; margin-top:-5px}
.organization .or03 .orhd:before{background: var(--point-color);left:0;top:50%;margin-top:-5px}
.organization .or04 .orhd:before{background: #444;}

.organization .or01 .orhd,
.organization .or02 .orhd,
.organization .or03 .orhd{webkit-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.2);
box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.2);}

.organization .or02 .orhd{padding:15px 30px; width:100%; width:100px; left:50%; margin-left:-50px; font-size:1.2em}
.organization .or02 .orhd.right{margin:0; left:0; float:right }
.organization .or02:before{content:''; width:50%; height:1px; right:0%; bottom:0; top:0; margin:auto;  position:absolute; display:block; background:#ecebe8; max-width:500px}


.organization .or03{position:relative; max-width:800px; margin:0 auto; margin-bottom:30px}
.organization .or03:before{content:''; width:50%; height:1px; right:0%; bottom:0; top:0; margin:auto;  position:absolute; display:block; background:#ecebe8; max-width:500px}
.organization .or03 .orhd{  margin-left:70%}
.organization .or03 .orhd.right{margin:0; margin-left:70%; float:right}

.organization .or04 .orhd{width:100%; padding:12px 0px; }

.organization .or04{overflow:hidden;}
.organization .or04{text-align:center; padding-top:50px; position:relative; font-size:0.9em; }


.organization .ordep .ortree{margin:0 auto;margin-bottom:30px;/* background:#f7f7fa; */position:relative;float:left;width: 12.28%;margin: 0 1%;}

.organization .ordep .ortree:last-child{margin-bottom:0}
.organization .ordep .ortree ul{position:relative;z-index:1;background:#f7f7fa;border-radius: 10px;}
.organization .ordep .ortree ul li{padding:10px; }

.organization .ordep .ortree ul li b{background:var(--mono_color); display:block; color:#fff; border-radius:50px; padding:5px 0px; font-size:0.9em}

.organization .or04:before{content:'';width: 85.66%;height:1px;background:#ecebe8;top:0px;left:0;right:0;margin:auto;display:block;position:absolute;}
.organization .ordep .ortree:before{content:''; display:block; width:1px; height:80px; background:#ecebe8;  left:0; top:-80px; right:0; margin:auto; position:absolute;}
.organization .ordep .ortree:before{height:80px; top:-80px}
.scroll-box{
    overflow-x: auto;
}


.org-top{}
.org-top strong{
    font-weight: 600;
    text-align: center;
    display: block;
    margin-bottom: 10px;
    font-size: 24px;
}
.tb-de{}
.tb-de td{}
.tb-de th{}
.org-top ul{
    background: #f1f3f5;
    border-radius: 10px;
    padding: 20px;
}
.org-top ul li{
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
}
.org-top ul li:last-child{margin-bottom:0px;}
.org-top ul li b{
    color: var(--point-color);
    width: 100px;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #e6e6e6;
}
.org-top ul em{
    display: inline-block;
    width: calc(100% - 100px);
    text-align: center;
}


@media all and (min-width:860px) {

.organization:before{height: 300px;}

.organization .ordep .orhd{padding:20px 0px !important; }
.organization .or01 .orhd{font-size:1.4em; width:250px;  margin-left:-125px}
.organization .or02 .orhd{font-size:1.4em; width:200px;  margin-left:-100px}

.organization .ordep.or01{margin-bottom:80px}
.organization .ordep.or02{margin-bottom:80px}
.organization .ordep.or03{margin-bottom:80px}

.organization .or04{padding:0; border:0; padding-top:80px; margin:0 auto; font-size:1em}


.organization .ordep .ortree ul li{padding:15px 10px;border-radius: 10px;}
.organization .ordep .ortree ul li span{display:block; font-size:0.9em; font-weight:600; opacity:0.7}


.org-top{}
.org-top strong{}
.tb-de{}
.tb-de td{}
.tb-de th{

}
.org-top ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}
.org-top ul li{
    width: calc(50% - 5px);
    margin: 0;
}
.org-top ul em{}}

@media all and (min-width:1200px) {
    .organization{}
.organization .ordep.or04 .orhd span{ font-size:1em}
.scroll-box{}

.org-top{}
.org-top strong{
    font-size: 30px;
    text-align: left;
}
.tb-de{}
.tb-de td{}
.tb-de th{
}
.org-top ul{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
}
.org-top ul li{
    padding: 15px 0px;
    font-size: 18px;
}
    .org-top ul li b{
    width: 90px;
}
.org-top ul em{
    width: calc(100% - 90px);
}
}



/*주요고객*/
.relative_list{position:relative}
.relative_list {position:relative}

.relative_list  ul li{margin-bottom:20px;background:#f8f8fa;padding:10px;position:relative;width: 49%;border-radius: 10px;}
.relative_list  ul li img{width:100%;}
.relative_list  ul li span{display:block; font-size:0.85em; text-align:center; padding:10px 0 0;  font-weight:500; color: var(--mono_color); word-break: keep-all;}
.relative_list  ul:after{content:''; clear:both; display:block;}
.relative_list  ul {display: flex; gap: 2%; flex-wrap: wrap;}


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

.relative_list  ul li{width:32%; margin:0 0 40px}

}

@media only screen and (min-width: 1200px) {
.relative_list  ul li{width:23.5%;padding: 20px;border-radius: 20px;}
    .relative_list.list03 ul li{width:32%;}
.relative_list  ul li span{padding:20px 0 10px; font-size:1.05em}
.relative_list ul li:hover{transform:translateY(-10px); box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.05); transition: .3s;}

}




/*인증현황*/

.certi_li{position:relative; display:flex; gap:2%; flex-wrap:wrap;}
.certi_li:after{content:''; clear:both; display:block;}
.certi_li li{position:relative; width:48%; margin:0 0 20px; text-align:center; }
.certi_li li a{position:relative; display:block}
.certi_li li img{width:100%; border:5px solid #f8f8f8}
.certi_li li span{display:block; letter-spacing:0; font-weight:600;  font-size:0.95em; background:#9298a3; padding:5px 10px; color:#ffffff}
.certi_li.none_bg li span{background:none; letter-spacing:-0.035em;  color:#323232; padding:10px}

.ani_box{position:relative; display:flex; flex-wrap:wrap;}
.ani_box:after{content:''; clear:both; display:block;}
.ani_box li{position:relative; width:48%; margin:0 1% 20px; text-align:center; }
.ani_box li .photo{position:relative}
.ani_box li a{position:relative; display:block}
.ani_box li img{width:100%; border:1px solid #e6e6e6}
.ani_box li span{display:block;  color:#323232; padding:10px; font-weight:600;  font-size:0.9em; }


@media all and (min-width:768px) {

.certi_li li{width:23.5%}
.certi_li li span{word-break: keep-all;}
.ani_box li{width:23.5%}

}


@media all and (min-width:1200px) {
.certi_li li span{font-size:1em}

}

@media all and (min-width:1680px) {
  .certi_li li{/* width:18%; */}
  .certi_li li span{font-size:1.1em}
  
  }






/*contact us*/

.offce_info .info{position:relative; padding:20px; border:1px solid #e6e6e6; border-radius:20px 20px 20px 0; margin-bottom:20px; font-size:0.9em}
.offce_info .info:last-child{margin-bottom:0px;}
.offce_info .info h5{font-weight:700; margin-bottom:10px; font-size:1.2em; color:var(--main_color2)}
.offce_info .info ul li{margin-bottom:3px; padding-left:60px; position:relative}
.offce_info .info ul li:last-child{margin-bottom:0px;}
.offce_info .info ul li span{font-weight:600; font-size:0.9em; position:absolute; left:0; color:var(--gr_color); z-index:10}

@media all and (min-width:1200px) {
.offce_info{margin-bottom:50px}
.offce_info .info{padding:30px; font-size:0.95em;}
.offce_info .info ul li{padding-left:80px}
}

.add_list{position:relative; }
.add_list.email_list li{width:100%}

.add_list li b{display:block;font-weight:700;margin-bottom:5px;color: var(--main-color);}
.add_list li{margin-bottom:20px;padding-left: 68px;position: relative;}
.add_list li:before{content: '\e0c8';position: absolute;font-family: 'Material Symbols Outlined', sans-serif;font-size: 2em;width: 55px;height: 55px;left: 0;top: 0px;line-height: 55px;color: var(--main-color);text-align: center;border-radius: 500px;background-color: #f8f8f8f8;font-weight: normal;}
.add_list li:last-child{margin-bottom:0px;}
.add_list li.ic_call:before{content:'\e61d'}
.add_list li.ic_fax:before{content:'\e8ad'}



.map{position:relative;z-index:0;/* border-bottom: 1px solid #dedede; */}
.map .direction{position:absolute; left:-10px; bottom:-10px; line-height:55px; height:55px; background:var(--main_color); color:#fff; border-radius:0 50px 50px 50px; display:inline-block; padding:0 20px }
.map .root_daum_roughmap{width: 100% !important;border-bottom: 1px solid #dedede;}
.root_daum_roughmap .cont .section.lst{display:none;}
@media all and (min-width:768px) {
.add_list{display: flex;flex-wrap: wrap;gap: 4%;padding-top: 20px;}
.add_list.email_list li{width:29.33%}
.add_list li:first-child{width:100%;}
.add_list li{width:48%;padding-left:65px;margin-bottom: 40px;}
}

@media all and (min-width:1200px) {
.map .direction{padding:0 30px}
.add_list li{width:19%;font-size: 20px;padding-left: 70px;/* margin-bottom: 50px; */}
.add_list li:first-child{width:54%}
    .add_list li b{
    font-size: 20px;
}
    .add_list li:before{
    font-size: 28px;
    top: 0px;
    width: 60px;
    height: 60px;
    line-height: 60px;
}
    .add_list li span{
    /* font-size: 22px; */
}
}





/*인재상*/
.recruit_dl{/* overflow:hidden; */text-align:center}
.recruit_dl dl{/* overflow:hidden; */padding:30px 20px;background:#ffffff;-webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.2);-moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.2);box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.2);/* margin:20px; */position:relative;border-radius: 10px;margin-bottom: 20px;}
.recruit_dl dl:hover{ -webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.8);
box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.8);}
.recruit_dl dl dt{font-weight:600; text-align:center; font-size:1.3em; margin-bottom:10px; }
.recruit_dl dl dt img{margin:0 auto;max-width:80px;display: block;}
.recruit_dl dl dd:last-child{margin-bottom:0;}
.recruit_dl dl dt span{font-size:0.9em;display:block;color:#acb0b3;font-weight:900;letter-spacing:5px;margin-bottom:5px;opacity: 0.2;margin-bottom: -25px;}


@media all and (min-width:768px) {
.recruit_dl dl{position:relative;width: 34%;vertical-align:top;display:inline-block;/* margin:15px 1%; */min-height: 300px;padding: 50px 0;}
.rec_dl4 dl{width:22%; min-height:210px;}
.recruit_dl dl dt{font-size:1.4em}
.recruit_dl dl dt,
.recruit_dl dl dd{width:100%; float:none;}
.recruit_dl dl:after, .recruit_dl dl:before,
.recruit_dl dl dt:after, .recruit_dl dl dt:before{
  width: 5px;
  height: 0;
  position: absolute;
  display: block;
  content: "";
  background-color: var(--point-color);
  transition:all 0.2s cubic-bezier(.25,.25,.53,.94);
}
.recruit_dl dl:after{width:0px; height:5px;}
.recruit_dl dl dt:after{width:0px; height:5px;}

.recruit_dl dl:before{width:5px; height:0px;}
.recruit_dl dl dt:before{width:5px; height:0px;}

.recruit_dl dl:after{left:0; top:0}
.recruit_dl dl:before{left:0; bottom:0}

.recruit_dl dl dt:after{right:0; bottom:0}
.recruit_dl dl dt:before{right:0; top:0; }
.recruit_dl dl:hover:after{width:100%}
.recruit_dl dl:hover:before{height:100%;}



.recruit_dl dl:hover dt:after{width:100%}
.recruit_dl dl:hover dt:before{height:100%;}

}

@media all and (min-width:1200px) {
    .recruit_dl{
    display: flex;
    gap: 30px;
}
 .recruit_dl dl dd{font-size:1.1em}
    .recruit_dl dl dt span{}
    .recruit_dl dl dt{
    font-size: 30px;
}
}


.recruit_dl2 dl{padding:25px 20px;margin-bottom:20px;background:#ffffff;border:1px solid #e6e6e6;border-top: 2px solid var(--main-color);position:relative}
.recruit_dl2 dl dt{font-weight:600;  margin-bottom:10px; }
.recruit_dl2 dl dt img{position:absolute; width:50px; height:50px; right:20px; top:20px;}
.recruit_dl2 dl dd{padding-left:8px;margin-bottom:3px;text-align:left;position: relative;}
.recruit_dl2 dl dd:last-child{margin-bottom:0;}
.recruit_dl2 dl dt{font-size:1.1em; display:block}
.recruit_dl2:after{content:''; clear:both; display:block}
.recruit_dl2 dl dd:after{content:'';clear:both;display:block;width: 3px;height: 3px;background: #8985c0;top: 50%;position: absolute;margin-top: -1.5px;left: 0px;}

@media all and (min-width:640px) {
.recruit_dl2 dl{float:left;width:48%;margin:0 1% 20px;height: 202px;}
.recruit_dl2 dl:nth-child(2n+1){clear:both; }

}



@media all and (min-width:768px) {
.recruit_dl2 dl{ width:31.33%; margin:0 1% 25px;}
.recruit_dl2 dl:nth-child(2n+1){clear:none; }
.recruit_dl2 dl:nth-child(3n+1){clear:both; }

}


@media all and (min-width:1200px) {
.recruit_dl2 dl{padding:30px;height: 230px;}
.recruit_dl dl dt img{max-width: 113px;}
}


.center{text-align: center;}









/*이미지*/


.img-list{
    display: flex;
    gap: 15px;
    flex-direction: column;
}
.img-list li{
    transform: translateY(-10px);
    box-shadow: 1px -1px 10px 0px rgba(0, 0, 0, 0.05);
    transition: .3s;
    border: 5px solid #f8f8f8;
    border-radius: 10px;
    text-align: center;
}


@media all and (min-width:768px) {
  .img-list{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.img-list li{
    width: calc(25% - 12px);
}  
}

@media all and (min-width:1200px) {
  .img-list{
    gap: 25px;
}
.img-list li{
    width: calc(25% - 19px);
    
}  
    .img-list li:hover{transform: translate(-10px, 0px);}
}






/*product*/

.product-table{
    width: 768px;
}
.product-table.pd{width:100%}
.product-table th{
    vertical-align: middle;
    background: #f8f8f8;
    border-radius: 10px;
    padding: 10px 0;
    position: relative;
}
.product-table th:after{
    display:block;
    clear:both;
    content:"";
    width: 1px;
    height: 27px;
    background: #e5e5e5;
    top: 9px;
    position: absolute;
    right: 0;
}
.product-table th:last-child:after{display:none;}
.product-table td{
    vertical-align: middle;
    border-bottom: 1px solid #ededed;
    text-align: center;
    padding: 10px 0;
    /* background: #f8f8f8; */
    /* border-radius: 10px; */
}
.product-table td img{width:100px;display: block;margin: 0 auto;}
.table-de{
    border-top: 2px solid var(--main-color);
    width: 100%;
}
.table-de th{
    background: #f8f8f8;
    vertical-align: middle;
    border-bottom: 1px solid #dedede;
    padding: 10px 0;
    border-right: 1px solid #dedede;
}
.table-de th:last-child{border-right:0px;}
.table-de td{
    text-align: center;
    border-bottom: 1px solid #dedede;
    vertical-align: middle;
    padding: 10px 0;
    border-right: 1px solid #dedede;
}
.table-de td:last-child{border-right:0px;}
.br{border-right: 1px solid #dedede !important;}
.product-table td b{display:block;margin-top: 10px;}
.product-table td span{display: inline-block;padding: 5px 15px;margin-top: 10px;}
.product-table td span.blue{
    color: #7981a3;
}
.product-table td span.red{
   color : #cb4444;
}
@media all and (min-width:768px) {


.product-table{
    width: 100%;
}
.product-table th{}
.product-table td{}

.table-de{}
.table-de th{}
.table-de td{}
}
@media all and (min-width:1200px) {


.product-table{}
.product-table th{
    padding: 20px 0;
    font-size: 19px;
}
    .product-table th:after{
    top: 20px;
}
.product-table td{
    padding: 20px 0;
}
    .product-table.pd td{
    padding: 40px 0;
}
    .product-table td img{width:150px;}
.product-table td img.sb{
    width: 250px;
}
.table-de{}
.table-de th{
    font-size: 18px;
    padding: 15px 0;
}
.table-de td{
    padding: 15px 0;
}
.product-table td span.red{
    background: #cb4444;
    border-radius: 50px;
    /* padding: 5px 0; */
    color: #fff;
    /* width: 126px; */
    margin: 0 auto;
    margin-top: 10px;
}.product-table td span.blue{
    background: #7981a3;
    border-radius: 50px;
    /* padding: 5px 10px; */
    color: #fff;
    /* width: 126px; */
    margin: 0 auto;
    margin-top: 10px;
}
    .table-de.lay{
    max-width: calc(100% - 600px);
    margin-top: -132px;
}
}






.flex50{}

.flex50 .box{
    margin-bottom: -20px;
}


@media all and (min-width:768px) {

  .flex50{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.flex50 .box{
    width: calc(50% - 10px);
}  
}
@media all and (min-width:1200px) {

.flex50{
    gap: 40px;
}
.flex50 .box{
    width: calc(50% - 20px);
    margin-bottom: -40px;
}  
}



.predev{}
.predev .bg{
    background: #f8f8f8;
    padding: 40px 0;
    margin-top: -40px;
}

.product-section {
  padding: 20px;
  background-color: #f9f9f9;
}

.prd-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.prd-list li {
  background: #fff;
  /* border: 1px solid #e0e0e0; */
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  box-shadow: 0px -1px 11px rgb(0 0 0 / 14%);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.prd-list .box {
  margin-bottom: 8px;
  width: 50%;
  /* border: 5px solid #ececec; */
}
.prd-list .box.w100{width:100%;}

.prd-list .box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  max-width: 150px;
  margin: 0 auto;
}

.prd-list .box span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #333;
  margin-top: -28px;
  text-align: center;
  background: #ffffff94;
  display: inline-block;
  /* background: red; */
  position: relative;
  z-index: 1;
  background: #f0f1f7;
  border-radius: 20px;
  text-align: center;
  padding: 3px 10px;
  font-weight: 400;
}

.prd-list strong {
  display: block;
  margin: 8px 0 4px;
  font-weight: 600;
  font-size: 16px;
  color: #0072ce;
  width: 100%;
  text-align: center;
  background: var(--point-color);
  color: #fff;
  border-radius: 20px;
  padding: 2px 0px;
  height: 30px;
  line-height: 30px;
  font-size: 1.1em;
  /* border-bottom: 2px solid var(--main-color); */
}
.prd-list.lay strong{margin-bottom: 9px;}

.prd-list i {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: #666;
  width: 100%;
  text-align: center;
  /* background: #f8f8f8; */
  margin-bottom: 10px;
}
.img-list2{
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.img-list2 li{}
.img-list2 li img{
    border-radius: 50%;
}
/* 반응형 - 태블릿 */
@media (min-width: 768px) {
  .prd-list {
    grid-template-columns: repeat(2, 1fr);
  }
    .prd-list .box img{
    width: 100px;
    margin: 0 auto;
}
    .predev .bg{
    margin-top: -50px;
    padding: 50px 0;
}
.img-list2{}
.img-list2 li{}
.img-list2 li img{}
}

/* 반응형 - 데스크탑 */
@media (min-width: 1200px) {
  .prd-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
    .prd-list .box img{
    width: 125px;
    margin: 0 auto;
}
    .predev .bg{
    padding: 100px 0;
    margin-top: -100px;
}
    .prd-list strong{height: 35px;line-height: 35px;margin-bottom: 10px;}
    .prd-list.lay strong{
    margin-bottom: 16px;
}
    .prd-list .box{
    height: 140px;
    text-align: center;
}
    .prd-list.lay .box{
    height: unset;
}
    .prd-list i{
    font-size: 15px;
}
    .prd-list .box span{
    font-size: 15px;
}
.img-list2{
    display: flex;
    justify-content: flex-end;
    margin-top: -128px;
}
.img-list2 li{}
.img-list2 li img{max-width: 263px;}
    .prd-list li{
    
    transition: 0.3s;
}
    .prd-list li:hover{transform: translate(10px, 10px);}
}



.infra-box{/* background: #dcdeea; *//* padding: 20px; */border-radius: 20px;}
.infra-box b{
    /* background: var(--point-color); */
    color: #fff;
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    border-radius: 10px;
    margin-bottom: 20px;
    display: none;
    color: var(--point-color);
    border: 3px solid var(--point-color);
}
.infra-box .i-list{}
.infra-box .i-list li{}
.infra-box .i-list li img{
    border-radius: 10px;
}
.infra-box .i-list li span{
    /* color: var(--point-color); */
    /* color: #fff; */
    /* background: var(--main-color); */
}



@media (min-width: 768px) {


.infra-box{}
.infra-box b{}
.infra-box .i-list{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.infra-box .i-list li{
    width: calc(50% - 10px);
}
.infra-box .i-list li img{}
.infra-box .i-list li span{
    text-align: center;
    display: block;
    margin-top: 10px;
    font-weight: 500;
}

}



@media (min-width: 1200px) {


.infra-box{}
.infra-box b{
    font-size: 22px;
    margin-bottom: 30px;
    border: 4px solid var(--point-color);
    background: #f0f1f7;
}
.infra-box .i-list{
    gap: 30px;
}
.infra-box .i-list li{
    width: calc(25% - 22.5px);
}
.infra-box .i-list li img{}
.infra-box .i-list li span{
    font-size: 17px;
    margin-top: 15px;
}

}



.step-list {display: flex;gap: 30px;flex-direction: column;}
.step-list li{
    /* background: var(--point-color); */
    border-radius: 20px;
    /* color: #fff; */
    padding: 20px;
    box-shadow: 0px -1px 11px rgb(0 0 0 / 14%);
    background: #fff;
    position: relative;
}
.step-list li .arr-box{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -7px;
}
.step-list li .arr-box .g{
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 11px solid var(--point-color); /* 삼각형 색상 */
    position: absolute;
    bottom: -20px;
    transform: rotate(180deg);
}
.step-list li .arr-box .n{
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 11px solid var(--main-color);
    position: absolute;
    bottom: -20px;
    color: var(--main-color);
}
.step-list li .arr-box .n em{
    position: absolute;
    top: -5px;
    right: -36px;
    font-size: 14px;
}
.step-list li:nth-child(2) .arr-box .g{
    margin-left: -40px;
}
.step-list li .arr-box .n{
    margin-left: 40px;
}
.step-list li .ic{
    margin-bottom: 10px;
    display: block;
}
.step-list li .ic img{
    width: 75px;
    margin: 0 auto;
    display: block;
}
.step-list li:after{
    
}
.step-list li:last-child{
    background: var(--main-color);
    color: #fff;
}
.step-list::before {
}


.bg-de{
    background: #f8f8f8;
    padding: 40px 0;
}
.step-list li span {background: #fff;font-weight: bold;background: var(--point-color);display: block;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 50%;margin: 0 auto;margin-bottom: 10px;color: #fff;}

.step-list li strong {display: block;text-align: center;/* color: #fff; */}

.txt-up{
    margin-top: 20px;
    font-weight: 400;
    color: var(--main-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23090087' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 15px;
    padding-left: 19px;
    font-size: 14px;
    background-position: 0 3px;
}


@media (min-width: 768px) {
.bg-de{
    padding: 40px 0;
}
}
@media (min-width: 1200px) {
    .bg-de{padding: 60px 0 100px;}
  .step-list {
  display: flex;
  flex-direction: row;
  gap: 50px;
  flex-wrap: wrap;
  justify-content: flex-end;
  }
    .step-list li{
    width: calc(25% - 39px);
    padding: 30px;
}

      .step-list li .arr-box .g{
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 11px solid var(--point-color);
    transform: rotate(90deg);
}  
    .step-list li .arr-box.lay{
    bottom: unset;
    left: 50%;
    right: unset;
    margin-bottom: 0px;
    bottom: -11px;
}
.step-list li .arr-box.lay .g{transform: rotate(180deg);/* bottom: 0px; */}
    .step-list li .arr-box{
    left: unset;
    right: -16px;
    bottom: 50%;
    margin-bottom: 10px;
}
  .step {
  }

  .step-list::before {
  }
    .step-list li span{
    font-size: 16px;
    width: 45px;
    height: 46px;
    margin-bottom: 15px;
}
    .step-list li strong{
    font-size: 22px;
    line-height: 1.3;
}
    .step-list li:nth-child(2) .arr-box .g{
    margin-left: unset;
    margin-bottom: 30px;
}
    .step-list li:nth-child(2) .arr-box .n{
    margin-bottom: -18px;
    margin-left: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 11px solid var(--main-color);
    transform: rotate(270deg);
}
    .step-list li .arr-box .n em{
    right: 14px;
}
    .step-list li .ic{
    margin-bottom: 15px;
}
    .step-list li .ic img{
    /* width: 90px; */
}
    .txt-up{
    font-size: 16px;
    background-position: 0 center;
    margin-top: -25px;
    bottom: 245px;
    position: absolute;
    background-size: 17px;
    padding-left: 22px;
}
}




.dev-process {
}

.dev-step-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dev-process .step {
  background: #fff;
  /* border-left: 8px solid #999; */
  /* padding: 16px; */
  position: relative;
  border-radius: 8px;
  box-shadow: 0 2px 9px rgb(0 0 0 / 8%);
  /* overflow: hidden; */
}

.dev-process .step h4 {
  margin-top: 0;
  /* margin-bottom: 10px; */
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  padding: 8px;
  text-align: center;
  border-radius: 10px;
}
.dev-process .step.dr1 h4{
    background: var(--point-color);
}
.dev-process .step.dr2 h4{
    background: #007bdb;
}
.dev-process .step.dr3 h4{
    background: #0042ac;
}
.dev-process .step.dr4 h4{
    background: var(--main-color);
}
.dev-process .step.dr5 h4{
    background: #050046;
}

.dev-process .step ul {
  padding-left: 16px;
  margin: 0 0 10px;
  font-size: 14px;
  padding: 20px;
  padding-bottom: 37px;
}

.dev-process .step li {
  margin-bottom: 4px;
  padding-left: 10px;
  position: relative;
  font-weight: 400;
}
.dev-process .step li:after{content: '';
    clear: both;
    display: block;
    width: 3px;
    height: 3px;
    background: #8985c0;
    top: 50%;
    position: absolute;
    margin-top: -1.5px;
    left: 0px;}

.dev-process .step .duration {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* background: #f8f8f8; */
  padding: 8px 0;
  border-top: 1px solid #dedede;
  color: var();
}
.dev-process .step.dr1 .duration{color: var(--point-color);}
.dev-process .step.dr2 .duration{color:#007bdb;}
.dev-process .step.dr3 .duration{color: #0042ac;}
.dev-process .step.dr4 .duration{color: var(--main-color);}
.dev-process .step.dr5 .duration{color: #050046;}

/* 단계별 색상 */
.dr1 {/* border-color: #808080; *//* background: #f2f2f2; */}
.dr2 { border-color: #3f51b5; background: #e8eaf6; }
.dr3 { border-color: #2196f3; background: #e3f2fd; }
.dr4 { border-color: #3949ab; background: #e8eaf6; }

/* 삼각형 포인터 (오른쪽 방향) */
.dev-process .step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #3949ab;
  z-index: 1;
  opacity: 0;
}

/* 마지막 단계는 삼각형 제거 */
.dev-process .step:last-child::after {
  display: none;
}

/* 하단 메모 */
.dev-process .note {
  margin-top: 16px;
  font-size: 13px;
  color: #444;
  /* background: #dcdcdc; */
  border-radius: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23090087' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 15px;
  padding-left: 18px;
  color: var(--main-color);
}

/* 반응형: 데스크탑에서는 가로 정렬 */
@media (min-width: 768px) {
  .dev-process .dev-step-list {
    flex-direction: row;
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
  }

  .dev-process .step {
    width: 31%;
    min-width: 200px;
  }
   .dev-process .list05 .step{/* width: 18%; */}
}


@media (min-width:1200px) {
    .dev-process .dev-step-list{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 40px;
}
.dev-process .note{
    font-size: 16px;
    background-position: 0 2px;
    background-size: 17px;
    padding-left: 23px;
}
    .dev-process .step ul{
    padding: 30px;
    padding-bottom: 68px;
}
    .dev-process .step li{
    font-size: 16px;
}
    .dev-process .step .duration{
    padding: 15px 0;
    font-size: 15px;
}
    .dev-process .step h4{
    font-size: 18px;
    padding: 15px 0;
}
  .dev-process .step {
    width: 23%;
    min-width: 200px;
  }
   .dev-process .list05 .step{width: 18%;}
    
    }

.p-bg{
    background: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
}
#patentChart{width:100% !important;height: auto !important;}
.patent-stats {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  margin: 20px 0;
}

.patent-stats th,
.patent-stats td {
  border: 1px solid #ccc;
  padding: 8px;
}

.patent-stats thead th {
  background-color: #dbe8f3;
  font-weight: bold;
}

.patent-stats tfoot td {
  background-color: #0a3553;
  color: white;
  font-weight: bold;
}



    @media (min-width:1200px) {

        .p-bg{
    border-radius: 20px;
    padding: 50px;
}
        #patentChart{
    /* height: 400px !important; */
}
    }





    .test-facility {
  padding: 20px 20px;
  background: #f8f8f8;
  color: #333;
  border-radius: 10px;
  position: relative;
}

.test-facility .section-title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

.test-facility .note {
  margin-top: 16px;
  font-size: 13px;
  color: #444;
  /* background: #dcdcdc; */
  border-radius: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23090087' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 11V17H13V11H11ZM11 7V9H13V7H11Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 15px;
  padding-left: 18px;
  color: var(--main-color);
}

.test-facility .test-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.test-facility .test-box {
  background: #fff;
  /* border: 1px solid #d0d0d0; */
  border-radius: 8px;
  /* width: 250px; */
  /* padding: 20px; */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  box-shadow: 0 2px 9px rgb(0 0 0 / 8%);
  width: 100%;
}

.test-facility .test-box h3 {
  font-size: 16px;
  font-weight: bold;
  /* margin-bottom: 12px; */
  color: #0d47a1;
  line-height: 1.4;
  margin-top: 0;
  /* margin-bottom: 10px; */
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  padding: 8px;
  text-align: center;
  border-radius: 10px;
  background: var(--point-color);
}
.test-facility .test-box.color h3{
    background: var(--main-color);
}
.test-facility .test-box ul {
  list-style: none;
  padding-left: 0;
  font-size: 14px;
  margin: 0;
  padding: 20px;
}

.test-facility .test-box ul li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 11px;
  font-weight: 500;
}

.test-facility .test-box ul li:after{
    content: '';
    clear: both;
    display: block;
    width: 3px;
    height: 3px;
    background: #8985c0;
    top: 9px;
    position: absolute;
    /* margin-top: -1.5px; */
    left: 0px;
    }

.test-facility .label-wrap {display: flex;margin-bottom: 20px;}

.test-facility .label {
  display: inline-block;
  font-size: 14px;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 6px;
  width: 50%;
  text-align: center;
  border-radius: 20px;
}

.test-facility .label.inhouse {
  background-color: var(--point-color);
}

.test-facility .label.outside {
  background-color: var(--main-color);
}



    @media (min-width:768px) {
.test-facility .test-categories{
    display: flex;
    flex-wrap: nowrap;
}
        .test-facility .label-wrap{
    width: 300px;
    display: flex;
    position: absolute;
    top: 30px;
    right: 25px;
}
        .test-facility{
    padding: 30px;
    padding-top: 82px;
}
        .test-facility.lay{
    padding-top: 30px;
}
        .test-facility .test-box h3{height: 55px;display: flex;align-items: center;justify-content: center;}
    }


    @media (min-width:1200px) {

.test-facility .note{font-size: 16px;
        background-position: 0 2px;
        background-size: 17px;
        padding-left: 23px;}
       .test-facility .test-box ul li{
    font-size: 16px;
} 
        .test-facility .test-box h3{
    font-size: 18px;
}
    }




    .img-list03 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.img-list03 li {
  width: 100%;
}

.img-list03 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.img-list03 img:hover {
  transform: scale(1.02);
}

@media (min-width: 768px) {
  .img-list03 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .img-list03 {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
}


.img-list04 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.img-list04 li {
  background: #fff;
  /* border: 1px solid #ddd; */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
  box-shadow: 0 2px 9px rgb(0 0 0 / 8%);
}

.img-list04 li:hover {
  transform: translateY(-3px);
}

.img-list04 img {
  width: 100%;
  height: auto;
  display: block;
}

.img-list04 strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--main-color);
  margin: 12px 16px 6px;
  line-height: 1.4;
}
.img-list04.lay strong{margin-bottom:12px;}

.img-list04 em {
  display: block;
  font-size: 14px;
  color: #666;
  margin: 0 16px 16px;
  font-style: normal;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .img-list04 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .img-list04 {
    /* grid-template-columns: repeat(5, 1fr); */
  }
    .img-list04.list04{grid-template-columns: repeat(4, 1fr);}
    .img-list04 strong{
    font-size: 17px;
    margin: 20px 25px 9px;
}
    .img-list04 em{
    font-size: 16px;
    margin: 0 25px 22px;
}
.img-list04.lay strong{margin-bottom:20px;}
}




/* Mobile-first 기본 스타일 */
.grt {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.grt .grt-img {
  width: 100%;
  height: 200px;
  background-image: url('/path/to/your-image.jpg'); /* 실제 이미지 경로로 변경 */
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
  background-image: url(../img/sub_vis_bg01.png);
  background: url(/img/grt.jpg);
  border-radius: 10px 30px;
}
.grt .txt .t1 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 8px;
  /* text-align: center; */
}
.grt .txt .t2,
.grt .txt .t3 {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 12px;
  /* text-align: center; */
}
.grt .txt .t1{
    color: var(--main-color);
    color: var(--point-color);
}
.grt .txt .t2{
    font-weight: 600;
    /* color: var(--point-color); */
}
.grt .txt .t3 {
  margin-bottom: 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 400;
}
.grt .g-box {
  width: 100%;
  /* padding: 16px; */
  margin-bottom: 16px;
  /* border-left: 4px solid var(--point-color); */ /* 강조 색상 변경 가능 */
  background-color: #f8f8f8;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 10px;
}
.grt .g-box strong {
  display: block;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--point-color);
  color: var(--main-color);
}
.grt .g-box .txt {
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 400;
  padding-top: 0px;
}

/* Tablet (태블릿) */
@media all and (min-width: 768px) {
  .grt {
    flex-direction: row;
    padding: 24px;
    display: flex;
    align-items: stretch;
  }
  .grt .grt-img {
    width: 40%;
    height: 250px;
    margin-bottom: 0;
    margin-right: 24px;
    height: 100%;
    height: 700px;
    margin-right: 50px;
  }
  .grt .txt {
    width: 60%;
  }
  .grt .txt .t1 {
    font-size: 2rem;
    text-align: left;
  }
  .grt .txt .t2,
  .grt .txt .t3 {
    font-size: 1.125rem;
    text-align: left;
  }
    .grt .txt .t3{
    margin-bottom: 30px;
}
  .grt .g-box {
    /* padding: 20px; */
    margin-bottom: 20px;
  }
  .grt .g-box strong {
    font-size: 1.2rem;
  }
  .grt .g-box .txt {
    font-size: 1rem;
    width: 100%;
  }
}

/* Desktop (데스크탑) */
@media all and (min-width: 1200px) {
  .grt {
    /* padding: 32px; */
  }
  .grt .grt-img {
    width: 34%;
    height: 800px;
    margin-right: 80px;
    border-radius: 10px 80px;
  }
  .grt .txt {
    width: 70%;
    padding-top: 15px;
  }
  .grt .txt .t1 {
    font-size: 2.4rem;
  }
  .grt .txt .t2 {
    font-size: 1.25rem;
    font-size: 30px;
  }
  .grt .txt .t3 {
    font-size: 1.125rem;
  }
  .grt .g-box {
    /* padding: 24px; */
    margin-bottom: 24px;
    padding: 20px;
    border-radius: 20px 50px;
  }
  .grt .g-box strong {
    font-size: 1.25rem;
  }
  .grt .g-box .txt {
    font-size: 1.125rem;
  }
}




.line-box{border:1px solid #dedede;}




.principle-wrap {line-height: 1.8;color: #222;background: #fff;}
.principle-wrap .pdinner { max-width: 960px; margin: 0 auto; padding: 60px 20px; }
.principle-wrap .section-title { font-size: 28px; font-weight: 700; margin-bottom: 20px; }
.principle-wrap .intro { font-size: 16px; color: #444; margin-bottom: 30px; }
.principle-wrap .info-box { background: #f8f8f8; border: 1px solid #ddd; padding: 15px 20px; margin-bottom: 40px; }
.principle-wrap .info-box p { margin: 4px 0; }
.principle-wrap .item { margin-bottom: 50px; }
.principle-wrap h3 {font-size: 20px;color: #006CAF;margin-bottom: 15px;font-weight: 700;/* border-left: 4px solid #006CAF; *//* padding-left: 10px; */color: var(--main-color);}
.principle-wrap h4 {font-size: 18px;color: #222;font-weight: 700;/* border-left: 4px solid #006CAF; *//* padding-left: 10px; */}
.principle-wrap dl { margin: 0; }
.principle-wrap dt { font-weight: 600; color: #333; margin-top: 20px; }
.principle-wrap dd {margin-left: 1em;color: #555;font-size: 15px;position: relative;padding-left: 10px;}
.principle-wrap dd:after{
    display:block;
    clear:both;
    content:"";
    width: 3px;
    height: 3px;
    background: #ccc;
    position: absolute;
    top: 12px;
    left: 0;
}
@media (max-width: 768px) {
  .principle-wrap .section-title { font-size: 22px; }
  .principle-wrap h3 { font-size: 18px; }
  .principle-wrap .pdinner { padding: 40px 15px; }
}




.tabs {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  /* border-bottom: 2px solid #e0e0e0; */
  background: #fff;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  gap: 10px;
}
.tabs::-webkit-scrollbar { display: none; } /* Chrome */

.tabs li {
  flex: 0 0 auto;
  list-style: none;
}
.tabs li a {
  display: block;
  padding: 12px 20px;
  font-size: 15px;
  color: #444;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  background: #f1f1f1;
  border-radius: 6px;
}
.tabs li a:hover {
  color: #006CAF;
}
.tabs li a.active {
  /* color: #006CAF; */
  font-weight: 600;
  /* border-color: #006CAF; */
  background: #f7fbff;
  border-radius: 6px;
  background: var(--point-color);
  color: #fff;
}

/* 반응형 - 태블릿 이상 */
@media (min-width: 768px) {
  .tabs {
    justify-content: center;
    /* border-bottom: 2px solid #ddd; */
  }
  .tabs li a {
    padding: 14px 28px;
    font-size: 16px;
  }
}

/* 반응형 - 데스크탑 */
@media (min-width: 1200px) {
  .tabs li a {
    padding: 16px 34px;
    font-size: 17px;
  }
}