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

/* vision */
.vision {overflow: hidden;}
.vision .inner {padding: 80px 0 95px;}
.vision .title-area .title {margin-bottom: 45px;}

/* group-motto */
.vision .group-motto {background: #fff;}
.vision .group-motto .motto-list {display: flex; margin-top: 60px;}
.vision .group-motto .motto-list .motto-item {width: 33.33%; position: relative; border-right: 1px solid #ddd; text-align: center;}
.vision .group-motto .motto-item:nth-child(1) {border-left: 1px solid #ddd;}
.vision .group-motto .motto-list .motto-icon {position: relative; width: 224px; height: 224px; margin: 0 auto; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: #f7f7f7;}
.vision .group-motto .motto-list .motto-info {margin-top: 33px;}
.vision .group-motto .motto-list .num {position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: #e50050; font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 600; color: #fff;}
.vision .group-motto .motto-list .title {font-size: 23px; font-weight: 700; color: #333;}
.vision .group-motto .motto-list .title::before {content: ''; display: block; width: 20px; height: 2px; background: #e50050; margin: 0 auto 5px;}
.vision .group-motto .motto-list .desc {font-size: 16px; font-weight: 300; line-height: 1.75; color: #666; margin-top: 15px;}

/* group-mission */
.vision .group-mission {background: url("../img/vis_miss_bg.jpg") no-repeat center/cover;}
.vision .group-mission .inner {padding-bottom: 130px;}
.vision .group-mission .title-area .title {color: #fff;}
.vision .group-mission .title-area .title::before {background: #fff;}
.vision .group-mission .info-area {position: relative; border-radius: 20px; background: rgba(255, 255, 255, .17); padding: 77px 20px;}
.vision .group-mission .info-area::before, .group-mission .info-area::after {content: ''; position: absolute; background-repeat: no-repeat; background-position: center;}
.vision .group-mission .info-area::before {left: 3%; top: -15%; width: 86px; height: 68px; background-image: url("../img/comma_left.png");}
.vision .group-mission .info-area::after {right: 3%; bottom: -15%; width: 89px; height: 71px; background-image: url("../img/comma_right.png");}
.vision .group-mission .info-area p {text-align: center; font-size: 23px; font-weight: 500; color: #fff;}

/* group-creed */
.vision .group-creed {background: #f7f7f7;}
.vision .group-creed .creed-content {position: relative;}
.vision .group-creed .logo-area {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 328px; height: 328px; display: flex; justify-content: center; align-items: center; border-radius: 20px; background: url("../img/vis_logo_area.png") no-repeat center/contain;}
.vision .group-creed .logo-area .logo {}
.vision .group-creed .creed-list {display: flex; flex-wrap: wrap; justify-content: space-between;}
.vision .group-creed .creed-list .creed-item {width: calc(50% - 40px); border: 1px solid #ddd; background: #fff; border-radius: 11px; padding: 32px 35px;}
.vision .group-creed .creed-item:nth-child(n+3) {margin-top: 20px;}
.vision .group-creed .creed-item:nth-child(2n) {text-align: right;}
.vision .group-creed .creed-item:nth-child(2n+1) {text-align: left;}
.vision .group-creed .creed-item:nth-child(2n) .creed-icon {float: right; margin-left: 25px;}
.vision .group-creed .creed-item:nth-child(2n+1) .creed-icon {float: left; margin-right: 25px;}
.vision .group-creed .creed-icon .icon {transition: .5s;}
.vision .group-creed .creed-item:hover .creed-icon .icon {transform: rotateY(180deg);}
.vision .group-creed .creed-list .creed-info {overflow: hidden;}
.vision .group-creed .creed-info .num {font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: #c7c7c7; display: block; margin-bottom: 7px;}
.vision .group-creed .creed-info .title {font-size: 16px; font-weight: 700; color: #333;}
.vision .group-creed .creed-info .title span {font-weight: 300; color: #666}

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

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

}

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

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

}

@media screen and (max-width: 1200px) {
    /* group-motto */
    .vision .group-motto .motto-list .motto-icon {width: 200px; height: 200px;}

    /* group-creed */
    .vision .group-creed .logo-area {width: 280px;}
    .vision .group-creed .logo-area .logo {width: 50%;}
    .vision .group-creed .creed-list .creed-item:nth-child(3) {padding-right: 100px;}
    .vision .group-creed .creed-list .creed-item:nth-child(4) {padding-left: 100px;}
}

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

    /* group-motto */
    .vision .group-motto .motto-list .motto-icon {width: 160px; height: 160px;}
    .vision .group-motto .motto-list .motto-item {padding: 0 20px;}
    .vision .motto-list .motto-icon img {width: 75px;}
    .vision .group-motto .motto-list .num {width: 50px; height: 50px;}

    /* group-mission */
    .vision .group-mission .info-area {padding: 55px 20px;}
    .vision .group-mission .info-area::before, .vision .group-mission .info-area::after {background-size: contain; width: 75px;}

    /* group-creed */
    .vision .group-creed .logo-area {display: none;}
    .vision .group-creed .creed-list .creed-item {width: calc(50% - 10px); padding: 30px 20px;}
    .vision .group-creed .creed-list .creed-item:nth-child(3) {padding-right: 20px;}
    .vision .group-creed .creed-list .creed-item:nth-child(4) {padding-left: 20px;}
    .vision .group-creed .creed-item:nth-child(2n) {text-align: left;}
    .vision .group-creed .creed-item:nth-child(2n) .creed-icon {float: left; margin: 0 25px 0 0;}
}

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

    /* group-motto */
    .vision .group-motto .motto-list {flex-direction: column;margin-top: 35px;}
    .vision .group-motto .motto-list .motto-item {width: auto; border: 1px solid #ddd; padding: 35px 20px;}
    .vision .group-motto .motto-item + .motto-item {margin-top: -1px;}
    .vision .group-motto .motto-list .motto-icon {width: 140px; height: 140px;}
    .vision .group-motto .motto-list .num {display: none;}
    .vision .motto-list .motto-icon img {width: 70px;}
    .vision .group-motto .motto-list .title {font-size: 21px;}
    .vision .group-motto .motto-list .desc {font-size: 15px;}

    /* group-mission */
    .vision .group-mission .info-area::before, .vision .group-mission .info-area::after {width: 70px;}
    .vision .group-mission .info-area p {font-size: 21px;}

    /* group-creed */
    .vision .group-creed .creed-info .title {font-size: 15px;}
}

@media screen and (max-width: 640px) {
    /* group-mission */
    .vision .group-mission .info-area::before, .vision .group-mission .info-area::after {width: 60px;}

    /* group-creed */
    .vision .group-creed .creed-list .creed-item {width: 100%;}
    .vision .group-creed .creed-item:nth-child(n+2) {margin-top: 10px;}
    .vision .group-creed .creed-icon .icon {max-width: 40px;}
}

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

    /* group-motto */
    .vision .group-motto .motto-list .motto-icon {width: 120px; height: 120px;}
    .vision .motto-list .motto-icon img {width: 60px;}
    .vision .group-motto .motto-list .title {font-size: 19px;}
    .vision .group-motto .motto-list .desc {font-size: 14px;}

    /* group-mission */
    .vision .group-mission .info-area::before, .vision .group-mission .info-area::after {width: 45px;}
    .vision .group-mission .info-area {padding: 40px 20px;}
    .vision .group-mission .info-area p {font-size: 19px;}

    /* group-creed */
    .vision .group-creed .creed-info .title {font-size: 14px;}
}