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

.guide_list ul li:first-child::before {display:none;}
.guide_list ul li > div {
    height: 160px;
    width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #ddd;
    margin-bottom: 1rem;
}
.guide_list ul li span {
    padding: .3rem 2rem;
    background-color: var(--color-main);
    color: #fff;
    border-radius: 3rem;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: .5rem;
    position: relative;
}
.guide_list ul li span:before {
    content:"";
    position:absolute;
    background-color: #ccc;
    width: 100%;
    height: 1px;
    left: 0;
    top: 50%;
    transform: translate(100%, -50%);
}
.guide_list ul li span:after {
    content:"";
    position:absolute;
    background-image:url(/img/page/guide/next.png);
    width: 35px;
    height: 35px;
    left: 100%;
    top:50%;
    transform: translate(100%, -50%);
    background-size: cover;
}
.guide_list ul li:last-child span::before, .guide_list ul li:last-child span::after {display:none;}
.guide_list dl {
    background-color: #fff;
    padding: 1rem 3rem;
    display: flex;
    flex-wrap: wrap;
    border-radius: 20px;
    margin-top: 2rem;
}
.guide_list dt {
    width: 18%;
    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: 80%;
    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-bottom:10%}


/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {
    .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;
}
    
    .guide_list ul {}
    .guide_list ul li p {
    word-break: keep-all;
    text-align: center;
}
    .guide_list ul li > div {
    width: 100px;
    height: 100px;
}
    .guide_list ul li span {
    padding: .5rem 1rem;
}
    .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;
}
    .guide_list dd {width: 75%;padding: 1rem 0;}
    .guide_list dt span {display: inline-block;margin-right: .5rem;}
    .process dl {
    padding: 2rem 1rem;
}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    p, li {font-size:4.5vw}
    .guide_sec2, .guide_sec3 {padding: 15% 0;}
    .guide_sec1 ul li {width:100%}
    .guide_list ul {}
    .guide_list ul li {
    width: 33%;
}
    .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 dl dd {
    width: 100%;
    padding-top: 0;
} 
    .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%;
}
}