@charset "utf-8";
.about {display:flex;gap: 4rem;align-items: center;background-color: #f7f7f8;padding: 3rem;border-radius: 2rem;}
.cibox {
    /* border: 1px solid #ddd; */
    /* padding: 2rem; */
    text-align: center;
    border-radius: 1rem;
    width: 35%;
}
.cibox img {}
.intro {
    width: 65%;
}
.intro p {font-size:20px;word-break: keep-all;}
.intro p + p {padding-top:1rem}
.vi_box {
    border: 6px solid #eee;
    padding: 3rem;
    border-radius: 2rem;
    text-align: center;
    position: relative;
}
.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;
}
.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;
}
.go_list li p {margin-top:1rem;border-top:1px solid #ddd;padding-top:1rem;font-size: 20px;font-weight: 500;}
.history_wrap {position:relative}
.history_wrap:before {content:"";position:absolute;display:block;/* width: 1px; */height: 93%;/* background-color: #f9d6d6; */left:0;margin-left:8px;top:50%;transform: translateY(-50.5%);border-right: 1px dashed #f9d6d6;}
.history_list {display: flex;align-items: baseline;}
.history_list + .history_list {margin-top: 2rem;}
.history_list .year {font-size: 30px;width: 20%;font-weight: 600;/* color: var(--color-main2); */position: relative;}
.history_list .year:before {content:"";position:absolute;width: 18px;height: 18px;background:var(--gradient);top:50%;left:0;transform:translateY(-50%);border-radius: 50%;border: 4px solid #ffffff;outline: 1px solid var(--color-main2);}
.history_list .year span {
    padding-left: 4rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--font-point);
}
.history_list .txt {background-color:#fff;padding: 1rem 2rem;border-radius: 1rem;width:80%;}
.history_list .txt dl {display:flex;align-items: baseline;}
.history_list .txt dl + dl {margin-top:.5rem;}
.history_list .txt dt {width: 8%;opacity: .6;letter-spacing: 0;}
.history_list .txt dd {width: 94%;}

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

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .about {flex-wrap: wrap;gap: 2rem;}
    .cibox, .intro {width:100%}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
	.about {padding:1.5rem; gap:1rem}
    .cibox img {width:100%;}
    .intro p {font-size:16px}
}