/* common */
.main-c3 .title-area .title {position: relative; font-family: 'Roboto', sans-serif; font-size: 65px; font-weight: 700; color: #000; line-height: 1.11;}
.main-c3 .title-area .title::after {content: ''; display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: #e50050; vertical-align: top;}
.main-c3 .title-area .desc {margin-top: 15px; font-size: 16px; font-weight: 300; color: #666; line-height: 1.88;}
.main-c3 .title-area .desc strong {font-size: 32px; font-weight: 700; line-height: 1.56;}
.main-c3 .title-area .btn-more {display: block; width: 200px; font-size: 16px; font-weight: 400; color: #fff; text-align: center; padding: 15px 0; border-radius: 27px; background: #363d43; transition: .3s;}
.main-c3 .title-area .btn-more:hover {background: #e50050;}

/* main-c3 */
.main-c3 {position: relative; overflow: hidden; z-index: 1; margin-top: -120px;}
.main-c3 .line-area {position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-width: 1500px; z-index: -1; display: flex; justify-content: space-between; margin: 0 auto;}
.main-c3 .line-area .line {position: relative; display: block; width: 1px; height: 100%; background: #e6e6e6;}
.main-c3 .line-area .line:first-child::before, .main-c3 .line-area .line:first-child::after, .main-c3 .line-area .line:last-child::before {content: ''; position: absolute; left: -2px; width: 5px; height: 5px; border-radius: 50%;}
.main-c3 .line-area .line:first-child::before {background: #009e96; top: 17%;}
.main-c3 .line-area .line:first-child::after {background: #4c4c4c; bottom: 9%;}
.main-c3 .line-area .line:last-child::before {background: #e50050; left: auto; right: -2px; top: 30%;}
.main-c3 .inner {padding: 250px 0 160px;}
.main-c3 .title-area {display: flex; justify-content: space-between; align-items: center;}
.main-c3 .management-area {display: flex; justify-content: space-between; margin-top: 45px;}
.main-c3 .management-area .management-box {width: calc((100% - 40px) / 2); position: relative;}
.main-c3 .management-box .management-thumb {overflow: hidden; border-radius: 20px;}
.main-c3 .management-box .management-thumb img {transition: .3s;}
.main-c3 .management-box:hover .management-thumb img {transform: scale(1.1);}
.main-c3 .management-info {margin-top: 30px;}
.main-c3 .management-info .title {font-size: 25px; font-weight: 700; color: #4c4c4c; position: relative; padding-left: 30px;}
.main-c3 .management-info .title::before {content: ''; width: 15px; height: 2px; background: #e50050; margin-right: 10px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.main-c3 .management-info .desc {margin-top: 20px; font-size: 16px; font-weight: 300; line-height: 1.75; color: #666; padding-left: 30px;}

/* media query */
@media screen and (max-width: 1700px) {
    /* common */
    .main-c3 .inner {padding: 250px 20px 160px;}
}

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

}

@media screen and (max-width: 1400px) {
    /* common */
    .main-c3 .inner {padding: 250px 60px 160px;}
}

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

}

@media screen and (max-width: 1200px) {
    /* common */
    .main-c3 br {display: none;}
}

@media screen and (max-width: 1023px) {
    /* common */
    .main-c3 .inner {padding: 100px 60px;}
    .main-c3 .title-area .title {font-size: 56px;}

    .main-c3 {margin-top: 0;}
    .main-c3 .line-area {display: none;}
    .main-c3 .title-area {flex-direction: column; text-align: center;}
    .main-c3 .title-area .desc {margin: 25px 0 0;}
    .main-c3 .title-area .btn-more {margin: 60px auto 0;}
    .main-c3 .management-area .management-box {width: calc((100% - 30px) / 2);}
    .main-c3 .management-info .title {font-size: 23px;}
}

@media screen and (max-width: 767px) {
    /* common */
    .main-c3 .inner {padding: 60px 40px;}
    .main-c3 .title-area .title {font-size: 52px;}
}

@media screen and (max-width: 640px) {
    .main-c3 .management-area {flex-direction: column; margin-top: 60px;}
    .main-c3 .management-area .management-box {width: 100%;}
    .main-c3 .management-area .management-box + .management-box {margin-top: 50px;}
    .main-c3 .management-info {margin-top: 20px;}
    .main-c3 .management-info .desc {margin-top: 10px;}
}

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

    .main-c3 .management-info .title {font-size: 21px;}
    .main-c3 .management-info .desc {font-size: 15px;}
    .main-c3 .title-area .btn-more {margin-top: 40px;}
}