@charset "UTF-8";
.about-banner { position: relative; }
.banner-title-wrap {
    position: absolute; top: 50%; width: 100%; color: #fff;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
.banner-title-inner { padding-left: 8vw;  }
.banner-title-inner h2 { font-size: 6.4vw; }
.banner-title-inner p { padding-top: 2.6667vw; font-size: 3.2vw; }
.about-s1 { position: relative; padding-top: 5.8667vw; padding-bottom: 8.5333vw; }
.about-s1-text h2 { padding-bottom: 4.8vw; font-size: calc(20px + (40 - 20) * ((100vw - 375px) / (750 - 375))); font-weight: 700; }
.about-s1-text p { font-size: calc(16px + (32 - 16) * ((100vw - 375px) / (750 - 375))); line-height: 1.5; }
.about-s1-text p:nth-last-child(n+2) { padding-bottom: 2.9333vw; }
.about-s2 h2 { padding-bottom: 4.8vw; font-size: calc(20px + (40 - 20) * ((100vw - 375px) / (750 - 375))); font-weight: 700; }
.about-s2-box { position: relative; }
.about-s2-img { padding-bottom: 30.9333vw; }
.about-s2-text {
    position: absolute; right: 50%; bottom: 10.6667vw; width: 77.3333vw; height: 26.6667vw; text-align: center; background: #f2f2f2;
    -webkit-transform: translateX(50%);
       -moz-transform: translateX(50%);
        -ms-transform: translateX(50%);
         -o-transform: translateX(50%);
            transform: translateX(50%);
    display: -webkit-flex;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    -webkit-box-pack: center;
       -moz-box-pack: center;
       -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-box-orient: vertical;
       -moz-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}
.about-s2-text h3 { padding-bottom: 2.5333vw; font-size: 4.8vw; font-weight: 700; }
.about-s2-text p { font-size: 3.2vw; color: #7a7a7a; }
@media (min-width: 768px) {
    .banner-title-inner h2 { font-size: 48px; }
    .banner-title-inner p { padding-top: 20px; font-size: 24px; }
    .about-s1-text h2 { font-size: 40px; }
    .about-s1-text p { font-size: 16px; }
    .about-s2 h2 { font-size: 40px; }
}
@media (max-width: 991.98px) {
    .about-section { padding-right: 9px; padding-left: 9px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .banner-title-inner { padding-left: 9.375vw; }
    .about-s2-text { width: calc(640px + (626 - 640) * ((100vw - 768px) / (991.98 - 768))); }
}
@media (min-width: 992px) {
    .banner-bg { overflow: hidden; }
    .banner-bg img.banner-bg-lg { width: auto; max-width: none; height: calc(480px + (580 - 480) * ((100vw - 1024px) / (1920 - 1024))); max-height: 580px; }
    .banner-title-wrap { top: 34.1667%; }
    .banner-title-inner { padding-left: 0; }
    .about-s1 { padding-top: 36px; padding-bottom: 180px; }
    .about-s1-img { position: absolute; top: calc(-1 * (114px + (260 - 114) * ((100vw - 1024px) / (1920 - 1024)))); margin-right: 50%; }
    .about-s1-text { padding-left: 55.567%; }
    .about-s1-text h2 { padding-bottom: 36px; }
    .about-s1-text p:nth-last-child(n+2) { padding-bottom: 22px; }
    .about-s2 h2 { padding-bottom: 36px; }
    .about-s2-img { padding-bottom: 0; }
    .box-1 .about-s2-img { padding-right: 24.7423%; }
    .box-2 .about-s2-img { padding-left: 24.7423%; }
    .box-3 .about-s2-img { padding-right: 24.7423%; }
    .about-s2-box { margin-bottom: 60px; }
    .box-1 .about-s2-text, .box-3 .about-s2-text {
        right: 0; bottom: 50%;
        -webkit-transform: translateY(50%);
           -moz-transform: translateY(50%);
            -ms-transform: translateY(50%);
             -o-transform: translateY(50%);
                transform: translateY(50%);
    }
    .box-2 .about-s2-text {
        right: unset; left: 0; bottom: 50%;
        -webkit-transform: translateY(50%);
           -moz-transform: translateY(50%);
            -ms-transform: translateY(50%);
             -o-transform: translateY(50%);
                transform: translateY(50%);
    }
    .about-s2-text { width: 400px; height: 300px; }
    .about-s2-text h3 { padding-bottom: 15px; font-size: 30px; }
    .about-s2-text p { font-size: 20px; }
}
@media (min-width: 1200px) {
    .banner-title-wrap { top: 28.2759%; }
    .about-s1 { padding-top: 48px; padding-bottom: 280px; }
    .about-s1-img { top: -260px; }
    .about-s1-text { padding-left: 56.3248%; }
    .about-s2 { height: 670px; }
    .about-s2-box { position: absolute; width: 880px; }
    .about-s2-box .about-s2-img { padding-right: 0; padding-left: 0; }
    .about-s2-box .about-s2-text { right: unset; left: 100%; width: 260px; height: 165px; }
    .box-1 .about-s2-text {
        bottom: 100%;
        -webkit-transform: translateY(100%);
           -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
             -o-transform: translateY(100%);
                transform: translateY(100%);
    }
    .box-3 .about-s2-text {
        bottom: 0;
        -webkit-transform: translateY(0);
           -moz-transform: translateY(0);
            -ms-transform: translateY(0);
             -o-transform: translateY(0);
                transform: translateY(0);
    }
    .about-s2-text h3 { padding-bottom: 14px; font-size: 24px; }
    .about-s2-text p { font-size: 14px; }
}