/* ============================================================
   DRIVERA Brand Detail Page
   ============================================================ */

/* ============ 기본 body 설정 ============ */
body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    color: #33312F;
}

/* ============================================================
   1. TITLE 애니메이션 시스템
   ============================================================ */

/* 1-1. 기본 title_txt 스타일 */
.title_txt {
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 100%;
    transform-origin: center bottom;
    display: inline-block;
}

/* 1-2. 애니메이션 초기 상태 */
.title_txt[class*="--reveal"] {
    opacity: 0;
    transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.title_img[class*="--reveal"] {
    opacity: 0;
    transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 1-3. 옵션 A. 아래에서 위로 등장 */
.title_txt.--reveal-up {
    transform: translateY(30px) scaleY(0.85);
}
.title_txt.--reveal-up.--in {
    opacity: 1;
    transform: translateY(0) scaleY(0.85);
}

/* 1-4. 옵션 B. 왼쪽에서 슬라이드 */
.title_txt.--reveal-left {
    transform: translateX(-40px) scaleY(0.85);
}
.title_txt.--reveal-left.--in {
    opacity: 1;
    transform: translateX(0) scaleY(0.85);
}
.title_img.--reveal-left {
    transform: translateX(-40px) scaleY(1);
}
.title_img.--reveal-left.--in {
    opacity: 1;
    transform: translateX(0) scaleY(1);
}

/* 1-5. 옵션 C. 눌렸다 펼쳐짐 */
.title_txt.--reveal-stretch {
    transform: scaleY(0.1);
    transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.title_txt.--reveal-stretch.--in {
    opacity: 1;
    transform: scaleY(1);
}

/* 1-6. 옵션 D. 페이드인만 */
.title_txt.--reveal-fade.--in {
    opacity: 1;
}

/* 1-7. 옵션 E. 밑줄 등장 */
.title_txt.--reveal-line {
    position: relative;
    padding-bottom: 12px;
    transform: translateY(20px) scaleY(0.85);
}
.title_txt.--reveal-line::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width 1s ease 0.4s;
}
.title_txt.--reveal-line.--in {
    opacity: 1;
    transform: translateY(0) scaleY(0.85);
}
.title_txt.--reveal-line.--in::after {
    width: 100%;
}

/* 1-8. 옵션 F. 회전 등장 */
.title_txt.--reveal-rotate {
    transform: rotate(-3deg) scaleY(0.85);
}
.title_txt.--reveal-rotate.--in {
    opacity: 1;
    transform: rotate(0) scaleY(0.85);
}

/* ============================================================
   2. 공통 레이아웃
   ============================================================ */
.detail-wrap {
    max-width: 100%;
    margin: 0 auto;
    font-size: 0;
    line-height: 0;
}
.detail-wrap img,
.detail-wrap video {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.txt {
    font-size: 18px;
    line-height: 170%;
}
.txt02 {
    font-size: 14px;
    color: #33312F;
    line-height: 170%;
}
.title02 {
    padding: 0 0 26px;
}

.pc { display: block; }
.mo { display: none; }

/* ============================================================
   3. 스크롤 등장 애니메이션
   ============================================================ */

/* 3-1. 단일 row */
.dt-row {
    width: 100%;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.dt-row.--in {
    opacity: 1;
    transform: translateY(0);
}

/* 3-2. 가로 그리드 */
.dt-grid {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: flex-start;
}
.dt-grid > .dt-cell {
    min-width: 0;
    flex: 1;
}

/* 3-3. 18번 그룹 (2단 가로) */
.dt-18-sub {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}
.dt-18-sub > div {
    flex: 1;
    min-width: 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.dt-18-sub.--in > div:nth-child(1) { transition-delay: 0s; }
.dt-18-sub.--in > div:nth-child(2) { transition-delay: 0.15s; }
.dt-18-sub.--in > div {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   4. HOVER 효과 (09번 등)
   ============================================================ */
.dt-hover {
    position: relative;
    overflow: hidden;
}
.dt-hover img {
    transition: opacity 0.4s ease;
}
.dt-hover img.dt-hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.dt-hover:hover img.dt-hover-img.--h1 {
    opacity: 1;
}
.dt-hover.--show-h2 img.dt-hover-img.--h1 { opacity: 0; }
.dt-hover.--show-h2 img.dt-hover-img.--h2 { opacity: 1; }
.dt-hover.--show-h3 img.dt-hover-img.--h1,
.dt-hover.--show-h3 img.dt-hover-img.--h2 { opacity: 0; }
.dt-hover.--show-h3 img.dt-hover-img.--h3 { opacity: 1; }

/* ============================================================
   5. 각 섹션별 레이아웃
   ============================================================ */

/* 5-1. detail-inner01 (Project Overview / Brand Insight / Brand Statement) */
.detail-inner01 {
    max-width: 875px;
    margin: 140px auto;
}

/* 5-2. detail-inner03 */
.detail-inner03 {
    max-width: 985px;
    margin: 0 auto;
    padding: 110px 0 0;
}
.detail-inner03 .dt-grid { gap: 24px; }
.detail-inner03 .title_txt { flex: 1; }
.detail-inner03 .txt02 { width: 32%; }

/* 5-3. detail-inner05 */
.detail-inner05 {
    width: 1440px;
    margin: 0 auto;
}
.detail-inner05 .inner {
    width: 68%;
    margin: 327px 0 0 27%;
    max-width: 989px;
}
.detail-inner05 .title_txt { flex: 1; }
.detail-inner05 .txt {
    width: 75%;
    display: inline-block;
    flex: unset;
}
.detail-inner05 .dt-grid { margin-bottom: 80px; }
.detail-inner05 .dt-grid:last-child { margin-bottom: 180px; }

/* ============================================================
   6. detail-inner06 (Brand Values 3분할)
   ============================================================ */

/* 6-1. brand-section (이미지+텍스트 오버레이) */
.brand-section {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.brand-section__img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}
.brand-section__labels {
    position: absolute;
    top: 8%;
    left: 7%;
    display: flex;
    gap: 15%;
    font-size: clamp(11px, 0.9vw, 14px);
    letter-spacing: 0.1em;
    color: #333;
    z-index: 2;
}
.brand-section__text {
    position: absolute;
    bottom: 0%;
    left: 57%;
    width: 30%;
    z-index: 2;
}
.brand-section__eyebrow {
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(13px, 1vw, 16px);
    margin: 0 0 15px 0;
    line-height: 150%;
    letter-spacing: 0.05em;
}
.brand-section__title {
    font-size: clamp(14px, 1.1vw, 17px);
    margin: 0 0 30px 0;
    font-weight: 500;
    line-height: 150%;
}
.brand-section__desc {
    font-size: clamp(12px, 0.9vw, 14px);
    line-height: 150%;
    margin: 0;
    max-width: 300px;
    word-break: keep-all;
}

/* 6-2. detail-inner06 컨테이너 */
.detail-inner06 .cont_bg {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.detail-inner06 .sec2 .brand-section__desc {
    position: absolute;
    left: 57%;
    top: 0;
    margin-top: 30px;
    line-height: 180%;
    font-weight: 500;
}
.detail-inner06 .cont_txt .title_txt {
    font-size: clamp(1rem, 1.25rem + 0.5vw, 1.5rem);
}
.detail-inner06 .cont_txt .title_txt .pp {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.detail-inner06 .cont_txt .title_txt .pp2 {
    font-weight: 500;
    margin-bottom: 40px;
}
.detail-inner06 .sec1 .cont_txt .txt {
    width: 40%;
    min-width: 290px;
}
.detail-inner06 .cont_txt .txt {
    font-size: 14px;
    width: 40%;
    line-height: 180%;
    min-width: 290px;
    font-weight: 500;
}

/* 6-3. 카드 이미지 3분할 */
.coard_cont {
    position: absolute;
    bottom: 10%;
    display: flex;
    left: 25.8%;
}
.coard_cont .card_img {
    flex: 1;
    width: 33%;
}

/* 6-4. Ritual Section (3단 컬럼) */
.ritual-section {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    position: absolute;
    left: 26%;
    top: 0;
}
.ritual-section .container {
    display: flex;
}
.ritual-section .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 33%;
    box-sizing: border-box;
    padding: 0 70px 0 30px;
}
.eng-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.kor-title {
    font-size: 18px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 40px;
}
.desc-text {
    font-size: clamp(14px, 0.95rem + 0.1vw, 15px);
    line-height: 1.7;
    word-break: keep-all;
    margin: 0;
}

/* ============================================================
   7. detail-inner09 (Brand Story 3단)
   ============================================================ */
.detail-inner09 {
    background-color: #FAF6F4;
    padding: 0 3%;
    background-image: url('https://www.valen-life.com/default/img/hblock/design/images/DRIVERA_PC_9_bg-2.png');
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px 20px;
}
.brand-story {
    width: 100%;
    padding: 100px 0 200px;
    box-sizing: border-box;
}
.story-row {
    align-items: center;
    gap: 60px;
}
.image-area {
    position: relative;
    width: 100%;
}
.image-area img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.sec-2 { margin-top: 400px; }

.text-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main-title {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 500;
    margin: 50px 0 20px 0;
}
.sub-title {
    font-size: clamp(14px, 1.6vw, 24px);
    margin: 0 0 45px 0;
}
.desc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.desc-grid p {
    font-size: clamp(13px, 1.2vw, 18px);
    line-height: 1.7;
    margin: 0;
    word-break: keep-all;
}
.desc-grid p:nth-child(2) {
    color: #7E7E7E;
    padding: 0 50px;
}

/* ============================================================
   8. sec-wrapper (13번)
   ============================================================ */
.sec-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 240px 4% 118px;
}
.driver-content-block {
    width: 100%;
    position: relative;
}
.driver-content-block .brand-section {
    display: flex;
    gap: 24px;
    justify-content: space-between;
}
.text-title {
    font-weight: 700;
    font-size: 20px;
    margin: 66px 0 24px;
}
.text-desc {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8;
    word-break: keep-all;
}

/* ============================================================
   9. sec_inner15 (Brand Design System)
   ============================================================ */
.sec_inner15 .sec-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 120px 4% 118px;
}
.sec_inner15 .driver-content-block {
    width: 100%;
    position: relative;
}
.sec_inner15 .brand-section {
    display: flex;
    gap: 24px;
    justify-content: space-between;
}
.sec_inner15 .brand-section02 .item02 { position: relative; }
.sec_inner15 .brand-section02 .item02 .img15-4 {
    position: absolute;
    right: -15%;
    width: 80%;
    bottom: 0;
    top: 170px;
}
.sec_inner15 .brand-section02 .item03 {
    width: 27%;
    position: relative;
}
.sec_inner15 .brand-section02 .item03 .img15-5 { margin-top: 380px; }
.sec_inner15 .brand-section02 .item03 .img15-6 {
    width: 56%;
    position: absolute;
    right: -65%;
    bottom: -10%;
}
.sec_inner15 .brand-section03 {
    margin: 315px auto 0;
    position: relative;
}
.sec_inner15 .brand-section03 .img15-8 {
    position: absolute;
    left: 54%;
    top: -180px;
    width: 28%;
}
.sec_inner15 .brand-section04 {
    width: 28%;
    margin: 180px auto;
}
.sec_inner15 .text-title {
    font-weight: 700;
    font-size: 20px;
    margin: 0px 0 16px;
}
.sec_inner15 .text-desc {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8;
    word-break: keep-all;
}

.brand-item { width: 50%; }
.brand-item.item02 { width: 29%; }

/* ============================================================
   10. detail-inner20 (Promotion & Contents)
   ============================================================ */
.detail-inner20 {
    padding: 180px 3%;
    background: #F9F6F4;
    position: relative;
}
.detail-inner20 .item01 { max-width: 550px; }
.detail-inner20 .item02 {
    position: absolute;
    right: 0;
    width: 25%;
    top: -50px;
}
.detail-inner20 .item03 { display: flex; }
.detail-inner20 .item03 .img20-2 { margin: 169px 0 0; }
.detail-inner20 .item03 .img20-3 { margin: 76px 0 0; }
.detail-inner20 .item03 .img20-4 { margin: 307px 0 0; }
.detail-inner20 .item03 .img20-5 { margin: 216px 0 0; }

/* ============================================================
   11. detail-inner21
   ============================================================ */
.detail-inner21 {
    padding: 230px 3% 167px;
    background: url('https://www.valen-life.com/default/img/hblock/design/images/DRIVERA_PC_21_bg.png') no-repeat;
    position: relative;
}
.detail-inner21 .item01 {
    display: flex;
    gap: 155px;
    justify-content: space-between;
}
.detail-inner21 .item01 .img21-1 { max-width: 852px; }
.detail-inner21 .item01 .img21-2 {
    max-width: 160px;
    margin: 240px 0 52px;
}
.detail-inner21 .item02 { display: flex; }
.detail-inner21 .item02 .img21-4 {
    max-width: 200px;
    margin: 0 40px 0 111px;
}
.detail-inner21 .item02 .img21-5 {
    max-width: 442px;
    margin: 183px 0 0 0;
}
.detail-inner21 .item03 {
    display: flex;
    margin: 100px 0 0;
    align-items: end;
    justify-content: space-between;
}
.detail-inner21 .item03 .img21-6 {
    max-width: 501px;
    margin: 0 50px 0 0;
}
.detail-inner21 .item03 .img21-7 {
    max-width: 226px;
    margin: 0 220px 0 0;
}
.detail-inner21 .item03 .img21-8 {
    max-width: 312px;
}

/* ============================================================
   12. detail-inner25
   ============================================================ */
.detail-inner25 {
    display: flex;
    padding: 30px;
    background-image: url('https://www.valen-life.com/default/img/hblock/design/images/DRIVERA_PC_25_bg.png');
    background-repeat: repeat;
    background-size: cover;
    position: relative;
    align-items: end;
}
.detail-inner25 .img25-1 {
    max-width: 224px;
    margin-right: 350px;
}

/* ============================================================
   13. detail-inner27 (Credit)
   ============================================================ */
.detail-inner27 {
    display: flex;
    padding: 105px;
    justify-content: flex-end;
}
.detail-inner27 .img27-1 { max-width: 380px; }

/* ============================================================
   14. 반응형 - 태블릿 (1024px 이하)
   ============================================================ */
@media (max-width: 1024px) {
    .ritual-section .container {
        flex-direction: column;
        gap: 50px;
        max-width: 500px;
    }
    .kor-title { margin-bottom: 15px; }

    .wrapper { gap: 100px; }
    .story-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .sec-2 .image-area { order: 0; }
    .sec-2 .text-area { order: 0; }
    .desc-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .sub-title { margin-bottom: 25px; }
    .absolute-plant {
        width: 30% !important;
        bottom: -30px;
        right: 0;
    }
}

/* Desktop 지그재그 (1025px 이상) */
@media (min-width: 1025px) {
    .sec-2 .image-area { order: 2; }
    .sec-2 .text-area { order: 1; }
}

/* ============================================================
   15. 반응형 - 모바일 (768px 이하)
   ============================================================ */
@media (max-width: 768px) {
    .dt-row,
    .dt-grid,
    .dt-grid > .dt-cell,
    .dt-18-sub > div {
        transform: translateY(0px);
        transition-duration: 0.6s;
    }

    .pc { display: none; }
    .mo { display: block; }

    .detail-inner01 { margin: 70px 7%; }
    .detail-inner01 .title02 { padding: 0px 0 26px; }

    .title_txt {
        font-size: 20px;
        padding: 0px 0 26px;
    }
    .txt { font-size: 13px; }

    .detail-inner03 { padding: 20px 7%; }
    .detail-inner03 .dt-grid { display: block; }
    .detail-inner03 .txt02 { width: 100%; }

    .detail-inner05 { width: 100%; }
    .detail-inner05 .inner {
        width: 100%;
        padding: 0 7%;
        margin: 70px 0;
    }
    .detail-inner05 .title_txt {
        font-size: 16px;
        margin-top: -25px;
    }
    .detail-inner05 .txt {
        width: 55%;
        font-size: 10px;
        margin: -20px 0;
    }
    .detail-inner05 .dt-grid:last-child { margin-bottom: 50px; }
}
.detail-inner09 .pcbg {padding:50px 0;}

.sec_inner15 .brand-section04 {width:100%!important;}
.sec_inner15 .brand-section04 img {width:70%;}
.sec_inner15 .brand-section04 .graphic-box {display:flex;justify-content:flex-end;}
@media (max-width: 768px) {

.dt-row,
    .dt-grid,
    .dt-grid > .dt-cell,
    .dt-18-sub > div {
        transform: translateY(20px);   /* 모바일에서도 살짝 위로 올라오기 */
        transition-duration: 0.8s;
    }
 .thumb-wrap{


    display:grid;


    grid-template-columns:repeat(3,1fr);


    grid-template-areas:
        ". center right"
        "left center right"
        "left bottom right";


    gap:5px;
}


.detail-inner20 .left{
    grid-area:left;
    align-self:center;margin-top: -150px;
}


.detail-inner20 .center{
    grid-area:center;margin-top:30px;
}


.detail-inner20 .bottom{
    grid-area:bottom;
    margin-top:-50px;
}


.detail-inner20 .right{
    grid-area:right;margin-top:160px;
    align-self:end;
}




    .pc { display: none; }
    .mo { display: block; }

    .detail-inner01 { margin: 70px 7%; }
    .detail-inner01 .title02 { padding: 0px 0 26px; }

    .title_txt {
        font-size: 20px;
        padding: 0px 0 26px;
    }
    .txt { font-size: 13px; }

    .detail-inner03 { padding: 20px 7%; }
    .detail-inner03 .dt-grid { display: block; }
    .detail-inner03 .txt02 { width: 100%; }

    .detail-inner05 { width: 100%; }
    .detail-inner05 .inner {
        width: 100%;
        padding: 0 7%;
        margin: 70px 0;
    }
    .detail-inner05 .title_txt {
        font-size: 16px;
        margin-top: -25px;
    }
    .detail-inner05 .txt {
        width: 55%;
        font-size: 10px;
        margin: -20px 0;
    }
    .detail-inner05 .dt-grid:last-child { margin-bottom: 50px; }
.block {display:block;font-size:0;line-height:0;}



.pd10 {padding:10px 0}
.brand-section__text {left:16%;display:flex;width:100%;gap:25px;bottom:10%;}
.brand-section__text .title_txt {font-size:14px;text-transform: none;letter-spacing: 0;font-weight:500;}
.brand-section__text .brand-section__title {font-size:14px;}
.brand-section__text .brand-section__desc {display:block;width:70%;padding-top:10px;}


.detail-inner06 .cont_bg {background-image:url('https://www.valen-life.com/default/img/hblock/design/images/DRIVERA_MO_6_bg3-2.png');background-size:contain;background-position:center;background-repeat:repeat-y;}
.detail-inner06 .coard {/*position:absolute;left:7%;top:15%;*/padding:15% 7% 0;}
.detail-inner06 .coard_cont {position:unset;margin-bottom:45px;}
.detail-inner06 .coard_cont:last-child {margin-bottom:0;}
.detail-inner06 .coard_cont .card_img {flex:unset;}
.detail-inner06 .coard_cont .card {margin-left:20px;}
.detail-inner06 .coard_cont .card .title_txt {font-size:14px;font-weight: 500;padding: 0px;letter-spacing: 0;}
.detail-inner06 .coard_cont .card .kor-title {font-size:14px;font-weight: 500;letter-spacing: 0;}
.detail-inner06 .coard_cont .card .desc-text {font-size:12px;width:90%;}
.detail-inner09 {padding:0;}
.brand-story {padding: 20px 0% 100px;}

.wrapper {
        
display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 100px;box-sizing: border-box;gap:0;}
.story-row:nth-child(odd) {padding-right:10px;padding-left:8%;}
.story-row:nth-child(even) {padding-left:10px;padding-right:8%;}
.main-title {font-size:14px;margin:30px 0 5px 0;}
.sub-title {line-height:120%;margin-bottom:10px;}
.sec-2 {margin-top:130px;}
.sec-3 {margin-top:-50px;}
.txt{font-size:14px;}
.sec-wrapper {padding:90px 4% 100px;}
.text-title {font-size:14px;margin:32px 0 10px;font-weight:500;}
.text-desc {font-size:12px;}
.sec_inner15 .sec-wrapper {padding:40px 4% 0px;}
.sec_inner15 .brand-section {align-items:flex-end;}
.brand-item.item02 {width:42%;}
.sec_inner15 .text-title {font-size:14px;font-weight:500;margin:0 0 5px;}
.sec_inner15 .text-desc {font-size:12px;}
.sec_inner15 .brand-section.brand-section02 {align-items:flex-start}
.sec_inner15 .brand-section02 .item03 .img15-5 {margin-top:200px;}
.sec_inner15 .brand-section02 .item02 {margin-top:70px;}
.sec_inner15 .brand-section02 .item02 .img15-4 {top:70px;}
.sec_inner15 .brand-section02 .item03 {width:40%;}
.sec_inner15 .brand-section03 {margin:130px 0 0;}
.sec_inner15 .brand-section03 .img15-8 {left:45%;width:45%;top:-160px;}


.sec_inner15 .brand-section04 {width:100%;margin:90px auto;}
.detail-inner20 {padding:90px 5%;}
.detail-inner20 .title_txt.title02 {font-size:14px;font-weight:500;padding:0 0 10px;  app}
.detail-inner20 .txt {font-size:12px;width:90%;}
.detail-inner20 .item02 {top:140px;}
.detail-inner21 {padding:60px 5%;}
.detail-inner21 .item01 {gap:30px;}
.detail-inner21 .item01-1 {width:30%;}
.detail-inner21 .item01 .img21-2 {margin:80px 0 15px;}
.detail-inner21 .item02 .img21-4 {margin: 0 10px 0 45px;width:15%;}
.detail-inner21 .item02 .img21-5 {max-width:120px;margin:50px 0 0 0}
.detail-inner21 .item03 {margin:30px 0 0}
.detail-inner21 .item03 div {width:30%;}
.detail-inner21 .item03 .img21-7 {margin:0;width:40%;}
.detail-inner21 .item03 .img21-7 img {width:60%;}
.detail-inner21 .item03 .img21-6 {width:40%;margin:0 20px 0 0;}
.detail-inner21 .item03 .img21-8 {width:25%;}
.detail-inner27 {padding:60px 0;text-align:center;display:block;}
.detail-inner27 .img27-1 {max-width:100%}
.detail-inner27 .img27-1 strong {font-weight:600;}
}