@charset "utf-8";

.intro_sec {}
.intro_txt {text-align: center;margin-bottom: var(--sub_pd_half);font-size: 22px;}
.intro_txt p {color: #545356;line-height: 150%;}
.intro_txt strong {color:var(--color-main);/* color: #111; */font-size: 26px;font-weight: 700;}
.intro_box {
    display: flex;
    padding: 3rem;
    /* border-top: 1px solid #ddd; */
    /* border-bottom: 1px solid #ddd; */
    gap: 3rem;
    background-color: #fff;
    border-radius: 3rem;
}
.intro_box .img {width: 34%;text-align: center;}
.intro_box .img span {/* background-color: #faf6f1; */padding: 2rem;text-align: center;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;width: 350px;height: 350px;border: 20px solid #F0EBE6;}
.intro_box .list {width: 70%;}
.intro_box .list dl {display:flex;flex-wrap:wrap;width:100%;gap: .5rem 5%;align-items: baseline;}
.intro_box .list dt {width: 17%;background-color:var(--color-main);color:#fff;text-align:center;padding:.5rem;border-radius:2rem;font-weight: 500;}
.intro_box .list dd {width: 77%;}
.intro_box .list dd ul {display:flex;flex-wrap:wrap;gap: .5rem 0;}
.intro_box .list dd ul li {width: 47%;position:relative;list-style: disc;margin-left: 1rem;}
.intro_box .list dd ul li::marker {color:#ddd}
.co_mivi_sec {}
.co_mivi_sec dl {padding:3rem;display: flex;gap: 6rem;border-radius: 4rem 0 4rem 0;align-items: center;}
.co_mivi_sec dl + dl {margin-top:2rem}
.co_mivi_sec dt {font-size: 32px;text-transform: uppercase;font-weight: 800;width: 30%;text-align: center;}
.co_mivi_sec dd {font-size:24px;width: 70%;}
.co_mivi_sec .mission {background-color: #FBECE1;}
.co_mivi_sec .mission dt {color:var(--color-main)}
.co_mivi_sec .vision { background-color: #EDF6ED;}
.co_mivi_sec .vision dt {color:var(--color-main2)}
.co_mivi_sec .arrow {display:block;text-align:center;margin-top: -5rem;}
.value {text-align: center;border: 1px solid #ddd;padding: 4rem 0;margin-top: 1rem;border-radius: 3rem;}
.value h5 {margin-bottom: 4rem;font-size: 30px;}
.value ul {display: flex;width: 85%;margin: 0 auto;}
.value li {width:100%;display: flex;flex-direction: column;align-items: center;gap: 3rem;position: relative;}
.value li:after {content:"";position:absolute;border-left:4px dotted #ddd;height: 6%;top: 57%;left: 50%;transform: translateX(-50%);}
.value li .icon {width: 160px;height: 160px;border-radius:50%;display:inline-flex;align-items: center;justify-content: center;}
.value li .txt {padding: 1.4rem;color:#fff;width: 100%;position: relative;z-index: 1;}
.value li .txt:before {content:"";position:absolute;display:block;width: calc(100% + 96px);height: 100%;left: 50%;top: 0;border-radius: 100px;transform: translateX(-50%);opacity: .7;z-index: -1;}
.value li .txt:after {content:"\F4B2";position:absolute;display:block;font-family: 'remixicon';font-size: 24px;left: 0;margin-left: -3%;top: 50%;transform: translateY(-50%);}
.value li .txt strong {font-weight:600; font-size:24px }
.value li .txt p {color:#fff;font-size: 20px;}
.value li:first-child .icon{background-color:#FFE9E4}
.value li:nth-child(2) .icon{background-color:#FFEED9}
.value li:nth-child(3) .icon{background-color:#EEF2D9}
.value li:first-child .txt::before{background-color:#B5402E;}
.value li:nth-child(2) .txt::before{background-color:#FF9101}
.value li:nth-child(3) .txt::before{background-color:#71A800}
.value li:first-child .txt::after {display:none}
.line_bg {background-image: url(/img/page/ci/line.png);/* width:1000px; */height: 300px;margin: auto;border: 1px solid #ddd;border-radius: 2rem;background-color: #fff;}
.line_bg .ci {display:flex;align-items: center;justify-content: center;height: 100%;}
.line_bg img {width:50%}
.co_ci_sec .ci_txt {text-align:center;margin: 2rem 0;}
.co_ci_sec .vane {
    position: relative;
    margin-top: 6rem;
}
.co_ci_sec .vane span {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-bg);
    padding: 0 1rem;
}
.vane ul {
    display: flex;
    gap: 20rem;
    position: relative;
}
.vane ul:before {content:"";position:absolute;display:block;width: 30%;border-top:4px dotted #ddd;top: 50%;left:50%;transform:translate(-50%, -50%);z-index: -1;}
.vane ul li {
    width: 100%;
    text-align: center;
    /* padding: 2rem; */
    background-color: var(--color-bg);
    border: 2px solid transparent;
    background-image: linear-gradient(var(--color-bg), var(--color-bg)), linear-gradient(90deg, #6f001e 0%, #e2712d 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-radius: 2rem;
}
.vane ul li:last-child {background-image: linear-gradient(var(--color-bg), var(--color-bg)), linear-gradient(90deg, #94aa2a 0%, #ed9b30 100%);}
.vane .pad {padding:2rem}
.vane .pad strong {font-size:20px; display:block; padding-bottom:.5rem}

/* PC */ 
@media only screen and (min-width:1025px) and (max-width: 1500px)  {
    
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .intro_txt p {word-break:keep-all}
    .intro_txt p br {display:none}
    .intro_box {
    padding: 2rem;
    gap: 1rem;
}
    .intro_box .img {width: 30%;}
    .intro_box .img span {width: 140px;height: 37%;border: unset;}
    .intro_box .list {width:70%}
    .intro_box .list dl {gap:.5rem 1rem}
    .intro_box .list dt {width:18%}
    .intro_box .list dd {width:77%}
    .intro_box .list dd ul li {width:100%}
    .co_mivi_sec dl {gap:2rem}
    .co_mivi_sec dd {font-size:20px}
    .value {padding:3rem 0}
    .value ul {width: 90%;}
    .value li .icon {width:120px; height:120px}
    .value li .icon img {width:55%}
    .value li .txt {padding: 1rem 0;}
    .value li .txt:before {width: calc(100% + 48px);}
    .value li .txt:after {margin-left: -6%;}
    .vane ul {gap: 12rem;}
    .vane .pad {padding:1.5rem}
    .vane .pad p {word-break:keep-all}
    .co_ci_sec .vane span {padding:0}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
	.intro_box {flex-wrap:wrap;padding: 1rem 1rem 2rem;}
    .intro_box .img {width:100%}
    .intro_box .img span {height:auto}
    .intro_box .list {width:100%}
    .intro_box .list dt {width:25%; font-size:16px}
    .intro_box .list dd {font-size:16px;width: 69%;}
    .co_mivi_sec dl {flex-wrap:wrap;gap: 1rem;padding: 2rem;}
    .co_mivi_sec dt, .co_mivi_sec dd {width:100%; text-align:center}
    .co_mivi_sec dt {font-size:24px}
    .co_mivi_sec dd {font-size:18px}
    .value h5 {margin-bottom:2rem}
    .value ul {flex-wrap:wrap; gap:2rem}
    .value li {gap: 1rem;}
    .value li:after {}
    .value li .txt:before {width:100%}
    .value li .txt strong {font-size:20px}
    .value li .txt p {font-size:18px}
    .value li .txt:after {display:none}
    .line_bg {height:120px;background-size: 4%;}
    .line_bg img {width:90%}
    .co_ci_sec .vane {margin-top: 0;}
    .vane ul {gap:1rem; flex-wrap:wrap}
    .vane ul:before {transform: translate(-50%, -50%) rotate(90deg);}
    .co_ci_sec .vane span {position:relative;text-align:center;top: 0;left: 0;transform: unset;padding-bottom: 1rem;}
}