@charset "utf-8";

.mission_sec {}
.mission {
    display: flex;
    position: relative;
    justify-content: center;
    gap: 19rem;
}
.mission .con {
    width: 400px;
    height: 400px;
    background-color: #ddd;
    border-radius: 50%;
    display: flex;
    position:relative;
    justify-content: center;
    align-items: center;
}
.mission .con:after {content:"";position:absolute;display:block;width:100%;height:100%;border:30px solid rgb(255 255 255 / 50%);border-radius:50%}
.mission .con span {font-size:45px;color:#fff;font-weight: 700;}
.mission .con1 {background-color: #B5402E;}
.mission .con2 {
    background-color: #16ADCC;
}
.mission .center {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: #fff;
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #b5402e 0%, #16adcc 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.mission .center:after {display:none}
.vision_sec {width:100%;/* margin: var(--sub_pd) 0 0; *//* padding-bottom: var(--sub_pd); *//* background-color: #F9F4EE; */padding: 0;}
.vision {
    display: flex;
    justify-content: center;
    gap: 8rem;
    align-items: center;
    position: relative;
    background-image: url(/img/page/mission/vison_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    width: 100%;
    /* border-radius: 3rem; */
    /* max-width: 1920px; */
    margin: 0 auto;
}
.vision .con {/* padding:3rem; *//* background-color:#fff; */width: 26%;border-radius: 2rem;/* border: 2px solid #ddd; *//* box-shadow: 3px 3px 10px rgb(0 0 0 / 6%); */}
.vision .con1 {/* border-color:#B5402E; */}
.vision .con2 {/* border-color:#16adcc; */} 
.vision .con p {font-size: 40px;font-weight: 500;text-align: center;color: rgb(255 255 255);}
.vision .con p strong {
    font-weight: 800;
    color: #ffe500;
    position: relative;
    font-size: 45px;
}
.vision .con p strong:before {content:"";position:absolute;display:block;width: 10px;height: 10px;background-color: #ffe500;left:50%;top:0;transform: translateX(-50%);margin-top: -1rem;border-radius: 50%;}
.vision .con:nth-of-type(2) p strong {color: #a0ff1d;}
.vision .con:nth-of-type(2) p strong::before {background-color: #a0ff1d;}
.vision span {position: relative; width:40px; height: 40px;}
.vision span:before {content: "";position: absolute;width:100%;height: 6px;background-color: #ffffff;opacity: .3;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 6px;}
.vision span:after {content: "";position: absolute;width:6px;height: 100%;background-color: #ffffff;opacity: .3;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 6px;}
.slogan_sec {
    /* margin-bottom: var(--sub_pd); */
}
.slogan {
    background-color: var(--color-bg);
    border: 2px solid transparent;
    background-image: linear-gradient(var(--color-bg), var(--color-bg)), linear-gradient(90deg, #b5402e 0%, #16adcc 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-radius: 10rem;
    }
.slogan_tit {text-align:center;position: relative;padding: 0;}
.slogan_tit h4 {background-color: var(--color-bg);display:inline-block;margin-top:-3rem;padding:0 5rem;}
.slogan_tit h4:after {right:5rem;}
.slogan p {font-size: 40px;text-align:center;padding: 4rem 0 5rem;color: #545454;font-weight: 500;}
.slogan p span {font-weight:700; color:#B5402E}
.slogan p span:last-child {color:#16adcc}
.bgtxt {color: rgb(226 113 45 / 8%);/* opacity: .2; */font-size:100px;font-weight: 900;text-transform: uppercase;display: block;position: absolute;left: 50%;top: 0;transform: translateX(-50%);margin-top: 3rem;font-family: 'Pretendard';}
.slogan_tit .bgtxt {margin-top: 2rem;}
.vision_sec .bgtxt {/* color:rgb(255 255 255 / 30%); */} 

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

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .bgtxt {font-size:60px}
    .mission {gap:10rem}
    .mission .con {width: 280px;height: 280px;}
    .mission .con span {width:80%;text-align: center;font-size: 36px;}
    .mission .con span img {width:100%}
    .vision {gap:2rem;padding: 0 30px;height: 300px;}
    .vision .con {width: 45%;}
    .slogan p {font-size:32px;padding: 3rem;}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .bgtxt, .slogan_tit .bgtxt {margin-top:1.6rem}
    .mission {gap:0}
    .mission .con {width:160px; height:160px}
    .mission .con:after {border: 10px solid rgb(255 255 255 / 50%);}
    .mission .con.center {display:none}
    .mission .con span {font-size:30px}
    .vision {flex-wrap:wrap;gap: 2rem;padding: 2rem;height: 200px;gap: 0;}
    .vision .con {width:100%}
    .vision .con p {font-size:26px}
    .vision .con p strong {font-size:30px}
    .vision .con p strong:before {width:8px;height:8px;margin-top: -10px;}
    .vision span {width:30px; height:30px}
    .slogan_tit h4 {padding:0 2rem}
    .slogan_tit h4:after {margin-right:-4rem}
    .slogan p {padding:2rem; font-size:24px}
}