/* common */
.process .title-area {text-align: center;}
.process .title-area .title {font-size: 50px; font-weight: 700; color: #000; margin-bottom: 25px;}
.process .title-area .title::before {content: ''; display: block; width: 50px; height: 3px; background: #e50050; margin: 0 auto 10px;}
.process .title-area .desc {font-size: 16px; font-weight: 300; line-height: 1.88; color: #4c4c4c;}

/* process */
.process {overflow: hidden;}
.process .inner {padding: 80px 0 95px;}
.process > div:nth-of-type(2n) {background: #f7f7f7;}
.process> div:nth-of-type(2n+1) {background: #ffff;}

.process .group-title .process-list {display: flex; justify-content: center; margin-top: 65px; margin-top: 5%;}
.process .group-title .process-item {width: 20%; height: 239px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-repeat: no-repeat; background-position: center; background-size: contain;}
.process .process-item:nth-child(1) {background-image: url("../img/process_bg1.png");}
.process .process-item:nth-child(2) {background-image: url("../img/process_bg2.png");}
.process .process-item:nth-child(3) {background-image: url("../img/process_bg3.png");}
.process .process-item:nth-child(4) {background-image: url("../img/process_bg4.png");}
.process .process-item:nth-child(5) {background-image: url("../img/process_bg5.png");}
.process .group-title .ico-process {margin-bottom: 30px; transition: .3s;}
.process .process-item:hover .ico-process {transform: rotateY(180deg);}
.process .group-title .num {display: block; margin-bottom: 7px; font-size: 15px; font-weight: 500;}
.process .process-item:nth-child(2n) .num {color: #11b0a8;}
.process .process-item:nth-child(2n+1) .num {color: #e50050;}
.process .group-title .process-list .title {font-size: 20px; font-weight: 700; color: #333;}

.process .process-view .process-area {display: flex; align-items: center; border-bottom: 1px solid #ddd; padding: 42px 0;}
.process .process-view .process-area:nth-child(1) {padding-top: 0;}
.process .process-view .title {font-size: 25px; font-weight: 700; color: #000; margin-right: 40px; min-width: 166px;}
.process .process-area:nth-child(2n) .num {color: #11b0a8;}
.process .process-area:nth-child(2n+1) .num {color: #e50050;}
.process .process-view .desc {font-size: 17px; font-weight: 300; color: #333;}

/* media query */
@media screen and (max-width: 1700px) {
    /* common */
    .process .inner {padding: 80px 20px 95px;}
}

@media screen and (max-width: 1500px) {

}

@media screen and (max-width: 1400px) {
    /* common */
    .process .inner {padding: 80px 60px 95px;}
}

@media screen and (max-width: 1300px) {

}

@media screen and (max-width: 1200px) {
    .process .group-title .ico-process {margin-bottom: 25px;}
    .process .group-title .ico-process img {width: 60px;}
}

@media screen and (max-width: 1023px) {
    /* common */
    .process br {display: none;}
    .process .title-area .title {font-size: 40px;}

    .process .group-title .process-list {flex-wrap: wrap; margin-top: 55px;}
    .process .group-title .process-item {width: calc((100% - 40px) / 3); height: auto; margin-right: 20px; background-image: none; border-width: 3px; border-style: solid; border-radius: 20px; padding: 30px 20px;}
    .process .process-item:nth-child(3n) {margin-right: 0;}
    .process .process-item:nth-child(n+4) {margin-top: 20px;}
    .process .process-item:nth-child(1) {border-color: #D3D3D3;}
    .process .process-item:nth-child(2) {border-color: #B1B2B2;}
    .process .process-item:nth-child(3) {border-color: #9E9E9E;}
    .process .process-item:nth-child(4) {border-color: #606060;}
    .process .process-item:nth-child(5) {border-color: #4B4B4B;}
    .process .group-title .num {font-size: 14px;}
    .process .group-title .process-list .title {font-size: 19px;}

    .process .process-view .title {font-size: 23px;}
    .process .process-view .desc {font-size: 16px;}
}

@media screen and (max-width: 767px) {
    /* common */
    .process .inner {padding: 60px 40px;}
    .process .title-area .title {font-size: 35px; margin-bottom: 20px;}
    .process .title-area .desc {font-size: 15px;}

    .process .group-title .ico-process {margin-bottom: 20px;}
    .process .group-title .ico-process img {width: 50px;}
    .process .group-title .num {font-size: 13px;}
    .process .group-title .process-list .title {font-size: 18px;}

    .process .process-view .process-area {padding: 35px 0;}
    .process .process-view .title {font-size: 20px; min-width: 140px;}
    .process .process-view .desc {font-size: 15px;}
}

@media screen and (max-width: 640px) {
    .process .group-title .process-item {width: calc((100% - 15px) / 2); margin-right: 15px; padding: 25px 20px;}
    .process .process-item:nth-child(3n) {margin-right: 15px;}
    .process .process-item:nth-child(2n) {margin-right: 0;}
    .process .process-item:nth-child(n+3) {margin-top: 15px;}

    .process .process-view .process-area {flex-direction: column; text-align: center; padding: 28px 0;}
    .process .process-view .title {min-width: 0; margin-right: 0;}
    .process .process-view .desc {margin-top: 15px;}
}

@media screen and (max-width: 480px) {
    /* common */
    .process .inner {padding: 60px 20px;}
    .process .title-area .title {font-size: 30px; margin-bottom: 15px;}
    .process .title-area .desc {font-size: 14px;}

    .process .group-title .process-list {margin-top: 40px;}
}