._story {overflow: hidden;}
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
        스토리 비주얼
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
._story.list .__visual {background: #fff; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; box-sizing: border-box; padding-top: 114px; padding-bottom: 115px;}
._story.list .__visual .max_lay {display: flex; flex-direction: column; align-items: center;}
._story.list .__visual h2 {font-size: 18px; letter-spacing: 0.2em; border: 1px solid #000; border-radius: 100%; display: inline-flex; height: 56px; width: 252px; align-items: center; justify-content: center; font-family: 'GT Walsheim Pro Light';}
._story.list .__visual .bt {position: relative; margin-top: 35px; display: inline-block; padding-right: 160px; margin-right: 102px;} 
._story.list .__visual .bt .text {width: 747px;}
._story.list .__visual .bt h3 {font-size: 100px; position: absolute; right: 1%; bottom: 7%; font-family: 'Recoleta SemiBold';}
._story.list .__visual .bt h3 span {font-family: 'GT Walsheim Pro Medium'; transform: skew(-4deg); display: inline-block;}

/* 반응형 */
@media screen and (max-width:1550px) {
    ._story.list .__visual .bt { margin-top: 2.26vw;  padding-right: 10.32vw; margin-right: 6.58vw;} 
    ._story.list .__visual .bt .text {width: 48.19vw;}
    ._story.list .__visual .bt h3 {font-size: 6.45vw;  right: 1%; bottom: 7%; }
}

/* 모바일 */
@media screen and (max-width:780px) {

    ._story.list .__visual {height: auto;  
        padding-top: calc(10.95vw + 62px); /*62px은 헤더의 높이*/
        padding-bottom: 5.60vw;
    }
    ._story.list .__visual h2 {font-size: 1.82vw; width: 26.79vw; height: 5.92vw;}

}

@media screen and (max-width:400px) {
    
    ._story.list .__visual h2 {font-size: 3.22vw; width: 33.79vw; height: 7.92vw;}

}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
        스토리 리스트
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
._story .list {width: 90%; max-width: 1700px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; margin-top: -125px; padding: 100px 0 140px;}
._story .list a {text-decoration: none;}
._story .list li {width: calc(100%/3 - 50px/3); margin-right: 25px; margin-top: 125px; transition: .6s; transition-property: transform;}
._story .list li.active {transform: translateY(-100px);}
._story .list .imgbox {position: relative; overflow: hidden;}
._story .list .imgbox .bg {background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transition: .6s;}
._story .list .imgbox::after {content: ''; display: block; padding-bottom: 100%;}
._story .list dl {margin-top: 27px;}
._story .list dt {font-size: 16px; color: #888888; font-family: 'GT Walsheim Pro Regular';}
._story .list dd {font-size: 18px; letter-spacing: -0.025em; margin-top: 15px; font-weight: bold; color: #000;}

._story .list .imgbox:hover .bg {transform: scale(1.1);}

@media screen and (min-width:769px) {
    ._story .list li:nth-of-type(3n) {margin-right: 0;}
}

@media screen and (max-width:1250px) {
    
    ._story .list {margin-top: -10vw; padding: 8vw 0 11.20vw;}
    ._story .list li.active {transform: translateY(-8.00vw);}
    ._story .list li {margin-top: 10vw;}

}

@media screen and (max-width:768px) {
    
    ._story .list li {width: calc(100%/2 - 5%/2); margin-right: 5%;}
    ._story .list li:nth-of-type(2n) {margin-right: 0;}
    ._story .list dl {margin-top: 15px;}
    ._story .list dt {font-size: 14px;}
    ._story .list dd {font-size: 16px;}

}

@media screen and (max-width:500px) {
    
    ._story .list li {width: 100%; margin-right: 0;}
    ._story .list dl {margin-top: 15px;}
    ._story .list dt {font-size: 14px;}
    ._story .list dd {font-size: 16px;}

}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
        스토리 뷰
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

._story.view{ background-color: #fff; }
._story.view .__visual {text-align: center; padding-top: 140px; }
._story.view .__visual h2 {font-size: 18px; letter-spacing: 0.2em; border: 1px solid #000; border-radius: 100%; display: inline-flex; height: 56px; width: 252px; align-items: center; justify-content: center; font-family: 'GT Walsheim Pro Light';}

._story .view {width: 90%; max-width: 800px; margin: 0 auto; padding-bottom: 170px;}
._story .view .tit {margin-top: 70px; text-align: center;}
._story .view .tit dt {font-size: 20px; color: #666666; font-family: 'GT Walsheim Pro Light';}
._story .view .tit dd {font-size: 40px; margin-top: 27px; font-weight: bold;}

._story .view .cont {margin-top: 50px; line-height: 1.4; letter-spacing: -0.025em; }
._story .view .cont img {max-width: 100%; height: auto !important; width: auto !important;}
._story .view .cont {font-size: 20px; letter-spacing: -0.025em; color: #666666; line-height:calc(40/20); word-break: keep-all;}
._story .view .cont .img {margin-top: 50px;}

._story .view .link {text-align: center; margin-top: 120px;}
._story .view .link .box { position: relative; display: inline-block;}
._story .view .link .arrow {position: absolute; left: -65px; top: 50%; transform: translateY(-50%);}
._story .view .link a {text-decoration: none;}
._story .view .link p{font-size: 28px; color: #000; font-family: 'Recoleta SemiBold';}
._story .view .link p i {font-family: 'GT Walsheim Pro Medium'; transform: skew(-5deg); display: inline-block;}
._story .view .link p::before {width: 50px; height: 3px; background: #000; display: block; margin: 0 auto; content: ''; margin-bottom: 28px;}

@media screen and (max-width:768px){
    
    ._story.view .__visual {height: auto;  
        padding-top: calc(10.95vw + 62px); /*62px은 헤더의 높이*/
        padding-bottom: 5.60vw;
    }
    ._story.view .__visual h2 {font-size: 1.82vw; width: 26.79vw; height: 5.92vw;}

    ._story .view {padding-bottom: 22.14vw;}

    ._story .view .tit {margin-top: 4.11vw; }
    ._story .view .tit dt {font-size: 2.60vw;  }
    ._story .view .tit dd {font-size: 5.21vw; margin-top: 3.52vw; }

    ._story .view .cont {font-size: 16px; line-height: 1.5;}
    ._story .view .cont .img {margin-top: 6.51vw;}

    ._story .view .link { margin-top: 15.63vw;}
    ._story .view .link .arrow { left: -8.46vw; top: 50%; transform: translateY(-50%); width: 5.34vw;}
    ._story .view .link p{font-size: 3.65vw; }
    ._story .view .link p::before {width: 6.51vw; height: 3px; margin-bottom: 3.65vw;}
    

}

@media screen and (max-width:400px) {
    
    ._story.view .__visual h2 {font-size: 3.22vw; width: 33.79vw; height: 7.92vw;}

}