/* common */
.about .page-summary {text-align: center;}
.about .page-summary::before {content: ''; display: block; width: 30px; height: 2px; background: #e30613; margin: 0 auto 25px;}
.about .page-summary .title {font-family: 'BMDOHYEON'; font-size: 36px; color: #000; line-height: 1.58;}
.about .page-summary .title strong {color: #e30613;}
.about .page-summary .description {font-size: 19px; font-weight: 300; line-height: 1.79; color: #333; margin-top: 18px;}

/* about */
.about {overflow: hidden;}
.about article:nth-of-type(2n) {background: #f7f7f7;}
.about article:nth-of-type(2n+1) {background: #fff;}
.about .inner {padding: 90px 0 100px;}

/* about-youtube */
.about-youtube .inner {padding-bottom: 120px;}
.about-youtube .page-summary .description {margin-top: 0;}
.about-youtube .youtube-area {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; margin-top: 40px;}
.about-youtube .youtube-area iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

/* about-detail */
.about-detail .image {border: 1px solid #dfe3ed; padding: 93px 90px;}
.about-detail .image img {width: 100%;}
.about-detail .image:hover img {transform: none;}

/* about-brand */
.about-brand .inner {padding-bottom: 135px;}
.about-brand__list {margin: 35px 0 70px; display: flex; justify-content: space-between;}
.about-brand__list li {width: calc(33.33% - 18px);}
.about-brand__list .logo {position: relative; border: 1px solid #dfe3ed; background: #fff; text-align: center;}
.about-brand__list .logo::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #e30613; transition: .3s; opacity: 0;}
.about-brand__list .logo:hover {border-color: #e30613;}
.about-brand__list .logo:hover::before {opacity: 1;}
.about-brand__list .logo img {width: 100%;}
.about-brand__list .text p {font-size: 18px; font-weight: 300; line-height: 1.83; letter-spacing: -0.45px; color: #333; text-align: center; white-space: nowrap;}
.about-brand__list .text::before {content: ''; position: relative; display: block; width: 1px; height: 60px; background: #e30613; margin: -15px auto 20px;}
.about-brand .btn {position: relative; display: flex; justify-content: space-between; align-items: center; width: 250px; padding: 15px 30px; border-radius: 5px; background: #e30613; margin: 0 auto; overflow: hidden; z-index: 1;}
.about-brand .btn span {font-size: 14px; font-weight: 400; color: #fff;}
.about-brand .btn::before {content: ''; position: absolute; right: 0; top: 0; width: 0; height: 100%; background: #ba040e; transition: .4s; z-index: -1;}
.about-brand .btn:hover::before {left: 0; width: 100%;}

/* media query */
@media screen and (max-width: 1700px) {
    /* common */
    .about .inner {padding: 90px 20px 100px;}

    .about-brand__list .text p {white-space: normal;}
    .about-brand__list .text p br {display: none;}
}

@media screen and (max-width: 1400px) {
    /* common */
    .about .inner {padding: 90px 60px 100px;}
}

@media screen and (max-width: 1300px) {
    .about .page-summary .title br, .about .page-summary .description br {display: none;}
}

@media screen and (max-width: 1200px) {
    .about-detail .image {padding: 50px;}
    .about-brand__list li {width: calc(33.33% - 15px);}
}

@media screen and (max-width: 1024px) {
    /* common */
    .about .page-summary .title {font-size: 33px;}
    .about .page-summary .description {font-size: 18px;}

    .about-brand__list li {width: calc(33.33% - 10px);}
    .about-brand__list .text p {font-size: 16px; }
}

@media screen and (max-width: 768px) {
    /* common */
    .about .inner {padding: 60px 40px;}
    .about .page-summary .title {font-size: 30px;}
    .about .page-summary .description {font-size: 17px;}

    .about-brand__list {flex-wrap: wrap;}
    .about-brand__list li {width: 100%;}
    .about-brand__list li + li {margin-top: 50px;}
    .about-brand__list .text::before {height: 50px; margin: -25px auto 15px;}
}

@media screen and (max-width: 640px) {
    /* common */
    .about .page-summary .title {font-size: 28px;}
    .about .page-summary .description {font-size: 16px;}

    .about-detail .image {padding: 30px;}
    .about-brand__list .text p {font-size: 15px;}
}


@media screen and (max-width: 480px) {
    /* common */
    .about .inner {padding: 60px 20px;}
    .about .page-summary .title {font-size: 24px;}
    .about .page-summary .description {font-size: 15px;}

    .about-detail .image {padding: 20px;}
    .about-brand__list {margin-bottom: 50px;}
    .about-brand__list li + li {margin-top: 40px;}
    .about-brand__list .text p {font-size: 14px;}
}