@charset "utf-8";

section.sub_sec:first-of-type {margin-top: var(--sub_pd);}
.title_img {background-image: url(/img/page/mission/title.jpg);}
.mivi {
}
.mivi li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.mivi li .img {width: 40%;}
.mivi li .img img {object-position:center;object-fit:cover;width: 500px;height: 500px;border-radius: 50%;}
.mivi li .txt {width: 50%;}
.mivi li .txt h5 {font-size:46px;font-weight:700;word-break: keep-all;margin-bottom: 2rem;line-height: 130%;letter-spacing:-1px}
.mivi li .txt p {font-size:28px;word-break: keep-all;color: #444;line-height: 140%;}
.mivi li .txt h5 span {color:var(--color-main)}
.mivi li > span {opacity: .06;font-size:200px;position:absolute;font-weight:800;right: 31%;top: 37%;letter-spacing: 10px;}
.mivi li:first-child > span {top: 26%;right: 9%;}
.strategy {position: relative;}
.part + .part {padding-top: var(--sub_pd_half);}
.targetSwiper {}
.targetSwiper .iconli li {text-align:center; margin:auto;}
.targetSwiper .iconli p {text-align: center;font-size:1.5rem;font-weight:600; padding-top:1rem}
.targetSwiper .iconli span {}
.targetSwiper .box_p {background-color:var(--color-main);color: #fff;text-align: center;padding: 1rem;border-radius: 10px;}
.targetSwiper .detail {
    background-color: #ffffff;
    margin-top: 1rem;
    padding: 2rem;
    border-radius: 10px;
}
.targetSwiper .detail p + p {padding-top:10px}
.slide-control {
    position: absolute;
    width: 69%;
    right: 30px;
    bottom: -10%;
    z-index: 1;
}
.slide-control {display: flex;}
.slide-control .swiper-pagination-progressbar.target-pagination {width:90%}
.swiper-pagination-progressbar.target-pagination .swiper-pagination-progressbar-fill {background-color:var(--color-main)}
.slide-control button {/* width:10%; */position: absolute;font-size: 2rem;bottom: 0;margin-bottom: -2%;opacity: .3;}
.slide-control button:hover {color:var(--color-main); opacity:1}
.btn-prev {
    right: 0;
    margin-right: 31px;
}
.btn-next {
    right: 0;
}
.diagram {
    display: flex;
    justify-content: center;
    padding-bottom: 2rem;
}
.circle {width: 43%;position: relative;/* text-align: center; */}
.circle .center {
    width: 420px;
    height: 420px;
    display: inline-flex;
    background-color: #EFFAFB;
    border-radius: 50%;
    position: relative;
    z-index: -1;
    justify-content: center;
}
.circle .center:before {content:"";position:absolute;width:110%;height:110%;left:50%;top:50%;transform: translate(-50%, -50%);border:1px solid #ddd;border-radius:50%}
.circle h4 {
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translateY(-50%);
    font-size: 40px;
    font-family: var(--font-point);
}
.circle {
    display: flex;
    justify-content: center;
}
.circle.mirror h4 {left:unset; right: 35%; }
.hexa_group {position:absolute; width:100%; height:100%;top:0; left:0}
.hexagon {background-image: url(/img/page/mission/hexagon.png);width: 156px;height: 180px;display: block;background-size: contain;background-repeat: no-repeat;display: inline-flex;align-items: center;justify-content: center;color: #fff;font-size: 1.5rem;font-weight: 500;position: absolute;}
.hexagon:first-child {
    left: 15%;
    top: -8%;
}
.hexagon:nth-child(2) {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.hexagon:last-child {
    left: 15%;
    bottom: -8%;
}
.circle.mirror .center {background-color:#FFF9F1}
.mirror .hexagon {background-image: url(/img/page/mission/hexagon_mi.png);left:unset}
.mirror .hexagon:first-child {right: 15%;}
.mirror .hexagon:nth-child(2) {right: 0;}
.mirror .hexagon:nth-child(3) {right: 15%;}

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

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
	.mivi li {flex-wrap:wrap}
    .mivi li:last-child {margin-top:2rem}
    .mivi li .img img {width:300px; height:300px}
    .mivi li .img {}
    .mivi li .txt {width:55%}
    .mivi li .txt h5 {font-size:2.5rem}
    .mivi li .txt p {font-size:1.5rem}
    .mivi li > span {font-size: 13vw;top: 22%;}
    .mivi li:first-child > span {top:10%}
    .targetSwiper .iconli p {font-size:1.3rem}
    .targetSwiper .box_p {font-size:18px;padding: 1rem 0;}
    .slide-control {width: 92%;bottom: -5%;}
    .diagram {}
    .circle {width: 48%;}
    .circle .center {width: 260px;height: 260px;}
    .circle h4 {font-size:2rem;/* left: 45%; */}
    .hexagon {width: 110px;height: 132px;}
    .hexagon:first-child {top: -20%;}
    .hexagon:last-child {bottom:-20%}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .mivi li .txt {width:100%;margin-top: 2rem;}
    .mivi li .txt h5 {font-size: 1.6rem;margin-bottom: 1rem;}
    .mivi li .txt p {font-size:18px}
    .mivi li .img {width:100%;text-align: center;}
    .mivi li .img img {width:260px; height:260px}
    .mivi li:first-child > span {top:60%}
    .targetSwiper .iconli span {width:100px;display: inline-block;text-align: center;}
    .targetSwiper .iconli span img {width:100%}
    .slide-control {width: 83%;bottom: -5%;}
    .slide-control .swiper-pagination-progressbar.target-pagination {width: 76%;left: 0;}
    .slide-control button {margin-bottom: -7%;}
    .targetSwiper .detail {padding:1rem}
    .targetSwiper .iconli p {font-size:20px}
    .diagram {display:flex;flex-direction: column;gap: 5rem;}
    .circle {width:100%}
    .circle h4 {font-size: clamp(1.6rem, 5.5vw, 2rem);}
    .circle .center {width: 220px;height: 220px;}
    .hexagon {width: 86px;height: 100px;font-size:20px}
    .hexagon:first-child {top: -15%;}
    .hexagon:last-child {bottom: -15%;}
}