@charset "utf-8";
.vol_top {
    text-align: center;
    margin-bottom: 6rem;
}
.vol_top .topimg {border-bottom:1px solid #ddd}
.vol_top strong {
    font-family: var(--font-point);
    color: var(--color-main);
    font-size: 40px;
    letter-spacing: -1px;
    display: block;
    margin: 2rem 0 1rem;
}
.vol_top p {font-weight: 400;color: #666;}
.volsection {margin-top:6rem;display: flex;width: 100%;}
.top_box {padding: 3rem 2rem;background-color: #f5f5f5;border-radius:2rem}
.con_box {width: 80%;}
.volsection h4 {width:20%}
.box_info {display: flex;gap: 2rem;/* flex-wrap: wrap; */width: 100%;}
.box_info li {/* display: flex; */border: 1px solid #ddd;border-radius: 1rem;padding: 3rem 2rem;/* min-width: 320px; */align-items: center;width: 100%;/* background-color: #f8f8f8; */text-align: center;/* background-color: #fff; *//* box-shadow: 0px 2px 15px rgb(58 138 253 / 20%); *//* border: 1px solid var(--color-main); */}
.box_info .img {margin-bottom:1.5rem}
.box_info li span {font-size: 35px;/* background-color:#f7f7f7; */vertical-align: middle;margin-right: .5rem;margin-bottom: 12px;color: var(--color-main);}
.box_info li .txt {margin-left: 5px;}
.box_info li strong {margin-bottom: 12px;display: inline-block;font-size: 20px;font-weight: 600;vertical-align: middle;}
.box_info li p {font-weight: 500;/* color:#666; *//* color: var(--color-main); */font-size: 20px;}
.step_list ol {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 2rem 0;
    padding-top: 6px;
    margin: 0;
    padding-left: 0;
}
.step_list li {
    width: 100%;
    position: relative;
    list-style: none;
}
.step_list li a {display: inline-flex;padding:.3rem 1rem;margin-top:.5rem;background-color:#e3eddb;border-radius:5px;color:#4e9e0a;font-size:17px;transition:all .4s;align-items: center;}
.step_list li a:hover {background-color:#69ba25; color:#fff}
.step_list li a i {
    font-size: 20px;
    margin-left: 1rem;
}
.step_list .num {position:relative;margin-bottom: 1rem;}
.step_list .num span {
    background-color: var(--color-main);
    width: 56px;
    height: 56px;
    display: inline-flex;
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: var(--font-point);
    font-weight: 500;
}
.step_list li:nth-child(2) .num span {background-color: #32c7bf;}
.step_list li:nth-child(3) .num span {background-color: #69ba25;}
.step_list li:nth-child(4) .num span {background-color: #f8a000;}
.step_list li:nth-child(5) .num span {background-color: #be7fff;}
.step_list li:nth-child(6) .num span {background-color: #ff4ba0;}
.step_list li:last-child .num span:before {content:"";position:absolute;width: 68px;height: 68px;background-color: #ff4ba045;z-index: -1;border-radius: 50%;}
.step_list li .num:after {content:"";width: calc(100% - 80px);height:1px;background-color:var(--color-main);position:absolute;left:0;margin-left: 60px;top:50%;transform:translateY(-50%)}
.step_list li:last-of-type .num:after {display:none}
.step_list li:nth-child(2) .num:after {background-color: #32c7bf;}
.step_list li:nth-child(3) .num:after {background-color: #69ba25;}
.step_list li:nth-child(4) .num:after {background-color: #f8a000;}
.step_list li:nth-child(5) .num:after {background-color: #be7fff;}
.step_list li .step {
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 1rem;
    color: #555555;
}
.step_list li .tit {
    font-size: 20px;
    font-weight: 500;
    word-break: keep-all;
}
.step_list li .tit .small {
    font-size: .95em;
}
.wr_link {
    text-align: center;
    margin-top: 4rem;
}
.wr_link a {padding:1rem;background-color:var(--color-main);color:#fff;border-radius:2rem;display:inline-block;width:30%;border:2px solid #fff0;font-size: 24px;font-weight: 500;}
.wr_link a:hover {border-color:var(--color-main); color:var(--color-main); background-color:#fff}

/* PC */ 
@media only screen and (min-width:1024px) and (max-width: 1400px)  {
    .top_box {padding:2rem 0}
    .box_p {margin: 2rem 1.5rem 0;}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (max-width:1023px) {
    .box_info {gap:0;justify-content: space-between;}
    .box_info li {width:49%}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    p, li, dd {font-size: clamp(.9rem, 4vw, 1rem);}
    
    .box_info {gap:.5rem 0}
    .box_info li {width:100%;padding: 1.5rem;}
    .box_info li img {width:65px; height:65px}
    .box_info .txt strong {font-size: clamp(1rem, 5vw, 1.5rem);}


	
}