@charset "utf-8";
.sub_conts {margin-bottom:0}
section.sub_sec:first-of-type {margin-top: var(--sub_pd);}
.gridbox {background:url(/img/page/ci/pat.svg);text-align: center;height: 365px;width: 100%;display: flex;justify-content: center;align-items: center;/* border-bottom: 1px solid #eee; */}
.download {margin-top:3rem; text-align: center;}
.download a .action {background-color:#333}
.download a .txt {color:#333}
.symbol {position: relative;}
.sb_img {
    display: inline-block;
    position: absolute;
    left: 3rem;
    top: 0;
}
.sb_mean {padding: 1rem 0 3rem;}
.sb_mean ul {
    margin-left: 30rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.sb_mean li {background-color: #EFF5EF;padding: 2.5rem;border-radius: 1rem;word-break: keep-all;width: 77%;position: relative;border: 1px solid #C2DDCE;line-height: 140%;}
.sb_mean li:last-child {margin-left: 8rem;}
.sb_mean li:before {content:"";position:absolute;width: 140px;height:1px;background-color:#ddd;left:0;margin-left: -140px;top: 50%;transform: translateY(-50%);}
.sb_mean li:after {content:"";position:absolute;width: 10px;height: 10px;background-color:#ddd;left:0;margin-left: -140px;top:50%;transform:translateY(-50%);border-radius:50%}
.colorbox {border:1px solid #ddd;display: flex;justify-content: center;align-items: center;padding: 3rem;gap: 14rem;border-radius: 2rem;}
.colorbox .color {display: inline-block;width:200px; height: 200px;background-color:var(--color-main); border-radius: 50%;}
.color_txt {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.color_txt h5 {color:var(--color-main);font-size: 30px;}
.color_txt strong {color:var(--color-main);font-size: 1.5rem;display: inline-block;margin-bottom: 1rem;}
.color_txt p {display:flex;gap: 1rem;letter-spacing: 0;font-size: 20px;}

.use {display: flex;gap: 8rem;}
.use li {/* background-color:#fff; */width:100%;text-align: center;}
.use li span {background-color: #fff;padding:3rem;display: block;border-radius: 2rem;border: 1px solid #eee;}
.use li span img {width: 100%;}
.use li p {font-size:20px; margin-top:1rem}

/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {

}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .gridbox img {width:90%}
    .sb_img {width: 40%;top: 9%;}
    .sb_img img {width:100%}
    .sb_mean {padding:0}
    .sb_mean ul {margin-left: 51%;}
    .sb_mean li {padding:1.5rem; width:100%}
    .sb_mean li:last-child {margin-left:0}
    .colorbox {gap: 2rem;padding: 2rem 1.5rem;}
    .colorbox .color {width: 150px;height: 150px;}
    .color_txt {width: 70%;}
    .use {gap:2rem}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .gridbox {height:auto;padding: 3rem 0;background-size: 15px;}
    .sb_img {top:50%;width: 50%;left: 50%;transform: translate(-50%, -50%);}
    .sb_mean ul {gap: 13rem;margin-left: 0;}
    .sb_mean li {padding:1rem}
    .use {flex-wrap:wrap}
    .use li span {padding:2rem; border-radius:1rem}
    .sb_mean li:before {transform: translateX(-50%);top: 100%;left: 50%;margin-left: 0;width: 1px;height: 30px;}
    .sb_mean li:after {top: 100%;margin-left: -3px;left: 50%;width: 6px;height: 6px;margin-top: 30px;}
    .sb_mean li:last-child:before {top: unset; bottom: 100%;}
    .sb_mean li:last-child:after {top: 0; margin-top: -30px;}
    .colorbox {flex-wrap:wrap;border-radius: 1rem;}
    .colorbox .color {width:120px; height:120px}
    .color_txt {width:100%}
    .color_txt p {flex-wrap:wrap;font-size: 16px;gap: 0;}
    .color_txt p span:first-child {width:100%}
    .color_txt h5 {font-size:1.5rem;text-align: center;}
    .color_txt strong {/* margin:0; */text-align: center;}
    .use li p {font-size:18px; margin-top:0.5rem}
    .download {margin-top:1rem}
}