@charset "utf-8";

.vi_box {
    border: 6px solid #eee;
    padding: 3rem;
    border-radius: 2rem;
    text-align: center;
    position: relative;
    margin-top: 3rem;
}
.vi_box h4 {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -2.5rem;
    background-color: #fff;
    padding: 1rem 2rem;
    margin-bottom: 0;
}
.vi_box p {
    font-size: 40px;
    /* background: var(--gradient); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    font-family: var(--font-point);
    display: inline-block;
    font-weight:500;
    letter-spacing: 0;
    /* font-weight: 600; */
}
.vi_box p span {/* color:var(--color-main2); */font-weight:800;/* font-size:45px; */background: var(--gradient);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.vi_box p span:first-child {/* color:var(--color-main); */}
.go_list {
    display: flex;
    gap: 5rem;
    justify-content: center;
}
.go_list li {
    width: 100%;
    text-align: center;
}
.go_list .icon {
    width: 300px;
    height: 150px;
    border-radius: 150px 150px 0 0;
    border: 6px solid transparent;
    background-image: linear-gradient(#fff, #fff), var(--gradient);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    border-bottom: 0;
    /* display: inline-flex; */
    /* align-items: center; */
    /* justify-content: center; */
    padding-top: 2.5rem;
}
.go_list li p {margin-top:1rem;border-top:1px solid #ddd;padding-top:1rem;font-size: 20px;font-weight: 500;}

/* PC */ 
@media only screen and (min-width:1024px) and (max-width: 1500px)  {
    .go_list {gap:2rem}
    .go_list li {width:22%}
    .go_list .icon {width:100%}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1023px) {
    .go_list {gap: 3rem;flex-wrap: wrap;display: flex;justify-content: center;}
    .go_list li {width: 40%;}
    .go_list .icon {width:100%}
    .vi_box {margin-top:2rem}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .vi_box {padding:2rem}
    .vi_box p {font-size:30px; word-break:keep-all}
    .go_list li {width:100%}
}