@charset "utf-8";
.guide_sec1 {
    margin-bottom: 5%;
}
.guide_sec1 ul {
    display: flex;
    justify-content: space-between;
}
.guide_sec1 ul li {
    width: 48%;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid var(--color-main);
    border-radius: 1rem;
    padding: 3rem;
}
.guide_sec1 ul li h5 {
    padding: 2rem 0 1rem;
}
.guide_sec1 ul li strong {font-size:var(--font-size20);font-weight: 500;display: block;margin-top: 1rem;}
.guide_sec1 ul li .point {
}
.guide_sec2_bg {
    background-color: #EFF7FC;
}
.guide_sec2 {
    /* margin-bottom: 5%; */
} 
.guide_list {border-radius: 20px;}
.guide_list ul {
    display: flex;
    flex-wrap: wrap;
}
.guide_list ul li {display: inline-flex;width: calc(100% / 7);position: relative;align-items: center;flex-direction: column;text-align: center;line-height: 1.4;}

.guide_list ul li:first-child::before {display:none;}
.guide_list ul li > div {
    height: 160px;
    width: 160px;
    display: inline-flex;
    background-color: #fff;
    border-radius: 50%;
    border: 5px solid #9DCB67;
    margin-bottom: 1rem;
    padding-top: .5rem;
    align-items: center;
    justify-content: center;
    position: relative;
}
.guide_list ul li span {
    background-color: #9DCB67;
    color: #fff;
    border-radius: 3rem;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: -14%;
    z-index: 1;
    width: 53%;
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-top: 2px;
}

.guide_list ul li:after {
    content:"";
    position:absolute;
    background-image:url(/img/common/next.png);
    width: 13px;
    height: 13px;
    right: 0;
    top: 35%;
    transform: translate(50%, -50%);
    background-size: cover;
}
.guide_list ul li:last-child:after {display:none;}
.guide_list ul li:nth-of-type(2) span {background-color:#87C167;}
.guide_list ul li:nth-of-type(3) span {background-color:#75B867;}
.guide_list ul li:nth-of-type(4) span {background-color:#63AF67;}
.guide_list ul li:nth-of-type(5) span {background-color:#51A666;}
.guide_list ul li:nth-of-type(6) span {background-color:#3E9D66;}
.guide_list ul li:nth-of-type(7) span {background-color:#269266;}

.guide_list ul li:nth-of-type(2) > div {border-color:#87C167;}
.guide_list ul li:nth-of-type(3) > div {border-color:#75B867;}
.guide_list ul li:nth-of-type(4) > div {border-color:#63AF67;}
.guide_list ul li:nth-of-type(5) > div {border-color:#51A666;}
.guide_list ul li:nth-of-type(6) > div {border-color:#3E9D66;}
.guide_list ul li:nth-of-type(7) > div {border-color:#269266;}
.guide_list dl {
    background-color: #fff;
    padding: 1rem 3rem;
    display: flex;
    flex-wrap: wrap;
    border-radius: 20px;
    margin-top: 2rem;
}
.guide_list dt {
    width: 25%;
    padding: 1rem;
    font-size: var(--font-size20);
    font-weight: 500;
    border-bottom: 1px dashed #ddd;
}
.guide_list dt:last-of-type, .guide_list dd:last-of-type {border-bottom:0}
.guide_list dt span {color: var(--color-main);font-size: 1.1em;margin-right: 1rem;}
.guide_list dd {
    width: 75%;
    padding: 1rem;
    border-bottom: 1px dashed #ddd;
}
.process {border: 1px solid #ddd;border-radius: 20px;display: flex;justify-content: space-between;margin-top: 1rem;}
.process dl {
    text-align: center;
    width: calc( 100% / 4 );
    position:relative;
    padding: 2rem;
}
.process dl:before {
    content:"";
    position:absolute;
    width:1px;
    height:100%;
    background-color:#ddd;
    right:0;
    top:0;
}
.process dl:after {
    content:"";
    position:absolute;
    background-image: url(/img/page/guide/next.png);
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    right: 0;
    top: 50%;
    transform: translate(45%, -50%);
    background-size: cover;
}

.process dl:last-child::after {display:none;}
.process dl dt {
    font-size: var(--font-size20);
    font-weight: 500;
    color: var(--color-main2);
}
.process dl dd {}
.process dl ul {
    margin: 1rem 0;
}
.process dl ul li {
    background-color: var(--color-main2);
    color: #fff;
    padding: .5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    position:relative;
    font-weight: 400;
    word-break: keep-all;
}
.process dl ul li:last-of-type {margin-bottom:0}
.process dl ul li:after {
    content:"\f078";
    position:absolute;
    left:50%;
    top: 100%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color:#929292;
    transform: translate(-50%, 6%);
}
.process dl ul li:last-child::after{display:none;}
.guide_sec3 {margin: 5% auto 10%;}


/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {
    .guide_list ul li > div {
    width: 130px;
    height: 130px;
}
    .guide_list ul li > div img {width:40%}
    .guide_list dt {width: 27%;}
    .guide_list dd {width: 73%;}
    .guide_list dl {padding:1rem}
    
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .guide_sec1 ul {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-around;
}
    .guide_sec1 ul li {
    width: 48%;
    margin-bottom: 1rem;
    padding: 2rem;
}
    
    .guide_list ul {}
    .guide_list ul li {
    width: 25%;
}
    .guide_list ul li p {
    word-break: keep-all;
    text-align: center;
    margin-bottom: 1rem;
}
    .guide_list ul li > div {
    width: 140px;
    height: 140px;
    margin-bottom: .5rem;
}
    .guide_list ul li > div:after {
    margin-right: 0;
    right: unset;
    left: 100%;
    transform: translate(100%, -50%);
}
    .guide_list ul li span {
    padding: .5rem 1rem;
    margin-bottom: -12%;
    width: auto;
}
    .guide_list ul li span:after {
    width: 25px;
    height: 25px;
}
    .guide_list dl {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
}
    .guide_list dt {
    width: 25%;
    padding: 1rem 0;
    font-size: 1em;
    word-break: keep-all;
    display: flex;
}
    .guide_list dd {width: 75%;padding: 1rem 0;word-break: keep-all;}
    .guide_list dt span {display: block;margin-right: .5rem;width: 18%;}
    .process dl {
    padding: 2rem 1rem;
}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    p, li {font-size:4.5vw}
    .guide_sec1 {margin-bottom:3rem}
    .guide_sec3 {padding: 3rem 0;}
    .guide_sec1 ul li {width:100%}
    .guide_list ul {}
    .guide_list ul li {
    width: 49%;
}
    .guide_sec1 ul li strong {font-size:4.8vw}
    .guide_list ul li p {}
    .guide_list ul li > div {}
    .guide_list ul li:nth-of-type(3) span:before {display:none}
    .guide_list ul li span:after {display:none}
    .guide_list dl {
    display: flex;
    flex-wrap: wrap;
}
    .guide_list dl dt {
    width: 100%;
    border-bottom: unset;
    padding-bottom: 0;
}
    .guide_list dt span {width:10%}
    .guide_list dl dd {
    width: 100%;
    padding-top: 0;
    font-size: 4.5vw;
} 
    .process {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-around;
    /* border: unset; */
}
    .process dl {
    width: 100%;
    border-bottom: 1px solid #ddd;
}
    .process dl:last-child {border-bottom:unset}
    .process dl:before {display:none}
    .process dl:after {
    width: 30px;
    height: 30px;
    transform: rotate(90deg);
    top: unset;
    left: 46.5%;
    bottom: -5%;
}
}