.porsche912 {
    background: #f5f1ed !important;
}
.porsche912 .s1 {
    padding-top: 100px;
    /* padding-bottom: 100px; */
    overflow: hidden;
}
.porsche912 .s1 .banner {
    display: flex; align-items: center; justify-content: space-between;
}
.porsche912 .s1 .banner .txt {
    flex-shrink: 0;
    width: 50%;
    display: flex; flex-direction: column;
}
.porsche912 .s1 .banner .txt b {
    font-family: 'Urbanist';
    font-weight: 500;
    font-size: clamp(100px, 120/1920*100vw, 120px);
    color: #351d06;
    padding-bottom: calc(25/120*1em);
}
.porsche912 .s1 .banner .txt b span {
    font-size: clamp(30px, 40/1440*100vw, 40px);
    padding-left: calc(10/40*1em);
}
.porsche912 .s1 .banner .txt p {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.02em;
    line-height: 1.4;
    color: #351d06;
}
.porsche912 .s1 .banner .img {
    flex-shrink: 0;
    width: calc(1063/1920*100vw);
    max-width: 1063px;
    overflow: hidden;
    position: relative;
}
.porsche912 .s1 .banner .img::after {
    content: '';
    display: block;
    padding-top: calc(526/1063*100%);
}
.porsche912 .s1 .banner .img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@media screen and (max-width: 1440px) {
    .porsche912 .s1 .banner .txt b {
        font-size: clamp(90px, 100/1440*100vw, 100px);
    }
    
}
@media screen and (max-width: 1280px) {
    .porsche912 .s1 .banner .txt {
        width: 52%;
    }
    .porsche912 .s1 .banner .txt b {
        font-size: clamp(80px, 90/1280*100vw, 90px);
    }
    .porsche912 .s1 .banner .txt b span {
        font-size: clamp(25px, 30/1280*100vw, 30px);
    }
    .porsche912 .s1 .banner .txt p {
        font-size: clamp(18px, 20/1280*100vw, 20px);
    }
    .porsche912 .s1 .banner .img {
        width: calc(700/1280*100vw);
    }
}
@media screen and (max-width: 1024px) {
    .porsche912 .s1 {
        padding-top: 80px;
    }
    .porsche912 .s1 .banner .txt {
        width: 55%;
    }
    .porsche912 .s1 .banner .txt b {
        font-size: clamp(70px, 80/1024*100vw, 80px);
    }
    .porsche912 .s1 .banner .txt b span {
        font-size: clamp(20px, 25/1024*100vw, 25px);
    }
    .porsche912 .s1 .banner .txt p {
        font-size: clamp(16px, 18/1024*100vw, 18px);
    }
    .porsche912 .s1 .banner .img {
        width: calc(600/1024*100vw);
    }
}
@media screen and (max-width: 820px) {
    .porsche912 .s1 {
        padding-top: 10px;
        overflow: hidden;
    }
    .porsche912 .s1 > .wrap {
        overflow: visible;
    }
    .porsche912 .s1 .banner {
        flex-direction: column-reverse;
    }
    .porsche912 .s1 .banner .txt {
        width: 100%;
    }
    .porsche912 .s1 .banner .txt b {
        font-size: clamp(60px, 70/820*100vw, 70px);
        padding-top: calc(20/70*1em);
    }
    .porsche912 .s1 .banner .txt b span {
        font-size: clamp(20px, 25/820*100vw, 24px);
    }
    .porsche912 .s1 .banner .txt p {
        font-size: clamp(16px, 18/820*100vw, 18px);
    }
    .porsche912 .s1 .banner .img {
        align-self: flex-end;
        width: calc(700/820*100vw);
        transform: translateX(20%);
    }
}
@media screen and (max-width: 500px) {
    .porsche912 .s1 .banner .txt b {
        font-size: clamp(50px, 60/500*100vw, 60px);
        padding-top: calc(80/60*1em);
    }
    .porsche912 .s1 .banner .txt b span {
        font-size: clamp(16px, 20/500*100vw, 20px);
    }
    .porsche912 .s1 .banner .txt p {
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
    .porsche912 .s1 .banner .img {
        width: calc(600/500*100vw);
        transform: translateX(30%);
    }
}
@media screen and (max-width: 360px) {
    .porsche912 .s1 .banner .txt b {
        font-size: clamp(40px, 50/360*100vw, 50px);
    }
    .porsche912 .s1 .banner .txt b span {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
}

.porsche912 .s2 {
    padding-top: 200px;
}
.porsche912 .s2 .content {
    display: flex; flex-direction: column
}
.porsche912 .s2 .content .item {
    display: flex; align-items: center;
    font-size: 50px;
    --scale: 50;
}
.porsche912 .s2 .content .item:nth-child(even) {
    align-self: flex-end;
}
.porsche912 .s2 .content .item + .item {
    margin-top: 220px;
}
.porsche912 .s2 .content .item .img {
    position: relative;
    margin-right: 70px;
}
.porsche912 .s2 .content .item .img span {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Noto Serif KR';
    font-size: 12px;
    color: #707070;
    padding: calc(10/12*1em) calc(20/12*1em);
    white-space: nowrap;
}
.porsche912 .s2 .content .item._1 .img {
    width: calc(310/var(--scale)*1em);
}
.porsche912 .s2 .content .item._2 .img {
    width: calc(396/var(--scale)*1em);
}
.porsche912 .s2 .content .item._3 .img {
    width: calc(530/var(--scale)*1em);
}
.porsche912 .s2 .content .item._4 .img {
    width: calc(310/var(--scale)*1em);
}
.porsche912 .s2 .content .item._5 .img {
    width: calc(420/var(--scale)*1em);
}
.porsche912 .s2 .content .item._6 .img {
    width: calc(510/var(--scale)*1em);
}
.porsche912 .s2 .content .item .txt {
    display: flex; flex-direction: column;
}
.porsche912 .s2 .content .item .txt dt {
    font-family: 'Noto Serif KR';
    font-weight: 700;
    font-size: inherit;
    color: #351d06;
    letter-spacing: -0.02em;
    padding-bottom: calc(45/50*1em);
}
.porsche912 .s2 .content .item .txt dd {
    font-family: 'Noto Serif KR';
    font-weight: 400;
    font-size: 18px;
    line-height: calc(30/18*1em);
    color: #351d06;
    letter-spacing: -0.02em;
    display: flex; align-items: flex-start;
}
.porsche912 .s2 .content .item .txt dd + dd {
    margin-top: calc(25/18*1em);
}
.porsche912 .s2 .content .item .txt dd p b {
    font-family: 'Noto Serif KR';
    font-weight: 700;
    font-size: inherit;
    color: #351d06;
}
.porsche912 .s2 .content .item .txt dd .hd {
    font-weight: 600;
    position: relative;
    margin-right: calc(20/18*1em);
}
.porsche912 .s2 .content .item._3 .txt dd .hd {
    width: calc(160/18*1em);
}
.porsche912 .s2 .content .item._4 .txt dd .hd {
    width: calc(120/18*1em);
}
.porsche912 .s2 .content .item._5 .txt dd .hd {
    width: calc(120/18*1em);
}
.porsche912 .s2 .content .item._6 .txt dd .hd {
    width: calc(130/18*1em);
}
.porsche912 .s2 .content .item .txt dd .hd::after {
    content: '';
    display: block;
    width: 2px;
    height: 60%;
    background: #351d06;
    position: absolute;
    top: 53%;
    transform: translateY(-50%);
    right: 0;
}
.porsche912 .s2 .mov {
    padding-top: 200px;
    max-width: 1200px;
    margin: 0 auto;
}
.porsche912 .s2 .bottom_banner {
    display: flex; flex-direction: column; align-items: center;
    font-size: 80px;
    padding-top: calc(250/80*1em);
    padding-bottom: calc(200/80*1em);
}
.porsche912 .s2 .bottom_banner .big {
    display: flex; align-items: flex-end;
    font-family: 'Noto Serif KR';
    font-weight: 700;
    color: #351d06;
    letter-spacing: -0.02em;
    padding-bottom: calc(50/80*1em);
}
.porsche912 .s2 .bottom_banner .big .logo {
    width: calc(310/80*1em);
    margin-left: calc(30/80*1em);
}
.porsche912 .s2 .bottom_banner p {
    font-family: 'Noto Serif KR';
    font-weight: 700;
    font-size: 22px;
    line-height: calc(40/22*1em);
    color: #351d06;
    letter-spacing: -0.02em;
    text-align: center;
}
.porsche912 .s2 .bottom_banner p br.mob{ display: none; }
@media screen and (max-width: 1440px) {
    .porsche912 .s2 {
        padding-top: 180px;
    }
}
@media screen and (max-width: 1280px) {
    .porsche912 .s2 {
        padding-top: 150px;
    }
    .porsche912 .s2 .content .item {
        font-size: clamp(40px, 50/1280*100vw, 50px);
        --scale: 60;
    }
    .porsche912 .s2 .content .item + .item {
        margin-top: calc(200/50*1em);
    }
    .porsche912 .s2 .content .item .txt dd {
        font-size: clamp(16px, 18/1280*100vw, 18px);
    }
    .porsche912 .s2 .mov {
        padding-top: 150px;
    }
    .porsche912 .s2 .bottom_banner {
        font-size: clamp(70px, 80/1280*100vw, 80px);
    }
    .porsche912 .s2 .bottom_banner p {
        font-size: clamp(20px, 22/1280*100vw, 22px);
    }
}
@media screen and (max-width: 1024px) {
    .porsche912 .s2 .content .item {
        font-size: clamp(30px, 40/1024*100vw, 40px);
        --scale: 40;
        flex-direction: column;
        align-items: flex-start;
    }
    .porsche912 .s2 .content .item .img {
        margin-right: 0px;
        margin-bottom: calc(30/40*1em);
    }
    .porsche912 .s2 .content .item .img span {
        position: static;
        transform: none;
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .porsche912 .s2 .bottom_banner {
        font-size: clamp(60px, 70/1024*100vw, 70px);
    }
    .porsche912 .s2 .bottom_banner p {
        font-size: clamp(18px, 20/1024*100vw, 20px);
    }
}
@media screen and (max-width: 820px) {
    .porsche912 .s2 .content .item {
        font-size: clamp(35px, 45/820*100vw, 45px);
        --scale: 50;
        flex-direction: column;
        align-items: flex-start;
    }
    .porsche912 .s2 .content .item + .item {
        margin-top: calc(130/45*1em);
    }
    .porsche912 .s2 .content .item:nth-child(even) {
        align-self: start;
    }
    .porsche912 .s2 .content .item .img {
        margin-right: 0px;
        margin-bottom: calc(20/40*1em);
    }
    .porsche912 .s2 .content .item .txt dt {
        padding-bottom: calc(30/40*1em);
    }
    .porsche912 .s2 .content .item .txt dd {
        flex-direction: column;
        align-items: flex-start;
    }
    .porsche912 .s2 .content .item .txt dd + dd {
        margin-top: calc(10/18*1em);
    }
    .porsche912 .s2 .content .item .txt dd .hd {
        margin-right: 0;
    }
    .porsche912 .s2 .content .item .txt dd .hd::after {
        display: none;
    }
    .porsche912 .s2 .bottom_banner .big {
        white-space: nowrap;
    }
    .porsche912 .s2 .bottom_banner {
        font-size: clamp(50px, 60/820*100vw, 60px);
    }
    .porsche912 .s2 .bottom_banner p {
        font-size: clamp(15px, 18/820*100vw, 18px);
    }
    .porsche912 .s2 .bottom_banner p br.mob{ display: block; }
}
@media screen and (max-width: 500px) {   
    .porsche912 .s2 {
        padding-top: 100px;
    }
    .porsche912 .s2 .content .item {
        align-items: center;
        font-size: clamp(25px, 35/500*100vw, 35px);;
    } 
    .porsche912 .s2 .content .item:nth-child(even) {
        align-self: center;
    }
    .porsche912 .s2 .content .item._2 .img {
        margin-bottom: calc(50/35*1em);
    }
    .porsche912 .s2 .content .item .txt dt {
        width: 100%;
        text-align: center;
    }
    .porsche912 .s2 .content .item .txt dd p br {
        display: block;
    } 
    .porsche912 .s2 .content .item .txt dd {
        align-items: center;
        text-align: center;
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
    .porsche912 .s2 .mov {
        padding-top: 100px;
    }
    .porsche912 .s2 .bottom_banner {
        padding-top: calc(100/40*1em);
        padding-bottom: calc(100/40*1em);
    }
    .porsche912 .s2 .bottom_banner .big {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    .porsche912 .s2 .bottom_banner .big .logo{ margin-left: 0; }
    .porsche912 .s2 .bottom_banner .big b {
        /* padding-bottom: calc(20/80*1em); */
    }
    .porsche912 .s2 .bottom_banner {
        font-size: clamp(40px, 45/500*100vw, 45px);
    }
    .porsche912 .s2 .bottom_banner p {
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
    /* .porsche912 .s2 .bottom_banner p br {
        display: none;
    } */
     
}

/*
--------------------------------
photowall
--------------------------------
*/


.photowall .s1 {
    margin-top: 100px;
    height: 100vh;
    padding-top: 240px;
    padding-bottom: 210px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.photowall .s1 .objWrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.photowall .s1 .objWrap .obj {
    border-radius: 50%;
    position: absolute;
}
.photowall .s1 .objWrap .obj::after {
    content: '';
    display: block;
    padding-top: 100%;
}
.photowall .s1 .objWrap .obj:nth-child(1) {
    width: 180px;
    left: calc(90/1920*100vw);
    top: 43px;
    background: #ead8c3;
    opacity: .4;
    animation: obj_ani_1 10s ease-in-out infinite;
}
@keyframes obj_ani_1 {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-20%);
    }
    100% {
        transform: translateY(0%);
    }
}
.photowall .s1 .objWrap .obj:nth-child(2) {
    width: 412px;
    left: calc(396/1920*100vw);
    bottom: 0;
    transform: translateY(20%);
    animation: obj_ani_2 10s .2s ease-in-out infinite;
    background: #c9bfb8;
    opacity: .2;
}
@keyframes obj_ani_2 {
    0% {
        transform: translateY(20%);
    }
    50% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(20%);
    }
}
.photowall .s1 .objWrap .obj:nth-child(3) {
    width: 120px;
    right: calc(260/1920*100vw);
    top: 50%;
    transform: translateY(-60%);
    animation: obj_ani_3 10s .4s ease-in-out infinite;
    background: #dcd3ce;
    opacity: .3;
}
@keyframes obj_ani_3 {
    0% {
        transform: translateY(-60%);
    }
    50% {
        transform: translateY(-40%);
    }
    100% {
        transform: translateY(-60%);
    }
}
.photowall .s1 .objWrap .obj:nth-child(4) {
    width: 320px;
    right: 0;
    top: 50%;
    transform: translateY(-60%);
    animation: obj_ani_4 10s .6s ease-in-out infinite;
    background: #f1e6d8;
    opacity: .5;
}
@keyframes obj_ani_4 {
    0% {
        transform: translateY(-60%);
    }
    50% {
        transform: translateY(-80%);
    }
    100% {
        transform: translateY(-60%);
    }
}

.photowall .s1 .wrap {
    height: 100%;
    position: relative;
}
.photowall .s1 .wrap .imgWrap {
    display: flex; align-items: flex-start;
    height: 100%;
}
.photowall .s1 .wrap .imgWrap .item {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}
.photowall .s1 .wrap .imgWrap .item:nth-child(odd) {
    align-self: flex-start;
    transform: translateY(-50%);
    margin-right: 130px;
}
.photowall .s1 .wrap .imgWrap .item:nth-child(even) {
    align-self: flex-end;
    transform: translateY(50%);
    margin-right: 225px;
}
.photowall .s1 .wrap .imgWrap .item.hor {
    width: 315px;
}
.photowall .s1 .wrap .imgWrap .item.ver {
    width: 200px;
}
.photowall .s1 .wrap .imgWrap .item .img {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.photowall .s1 .wrap .imgWrap .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition-duration: 0.6s;
}
.photowall .s1 .wrap .imgWrap .item.hor .img::after {
    content: '';
    display: block;
    padding-top: calc(200/315*100%);
}
.photowall .s1 .wrap .imgWrap .item.ver .img::after {
    content: '';
    display: block;
    padding-top: calc(280/200*100%);
}
.photowall .s1 .wrap .imgWrap .item .txt {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column;
    font-size: 16px;
    padding-left: calc(20/16*1em);
}
.photowall .s1 .wrap .imgWrap .item .txt span {
    font-family: 'Noto Serif KR';
    font-size: 14px;
    color: #351d06;
    letter-spacing: -0.02em;
    padding-bottom: calc(10/16*1em);
    opacity: .6;
}
.photowall .s1 .wrap .imgWrap .item .txt p {
    font-family: 'Noto Serif KR';
    font-size: inherit;
    color: #351d06;
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: calc(26/14*1em);
}

@media screen and (min-width: 821px){
    .photowall .s1 .wrap .imgWrap .item:hover .img img{ transform: translate(-50%, -50%) scale(1.05); }
}

@media screen and (max-width: 1280px) {
    .photowall .s1 {
        padding-top: 180px;
        padding-bottom: 130px;
    }
    .photowall .s1 .wrap .imgWrap .item.ver {
        width: clamp(160px, 200/1280*100vw, 200px);
    }
    .photowall .s1 .wrap .imgWrap .item.hor {
        width: clamp(260px, 280/1280*100vw, 280px);
    }
}
@media screen and (max-width: 1024px) {
    .photowall .s1 {
        padding-top: 150px;
        padding-bottom: 100px;
    }
    .photowall .s1 .wrap .imgWrap .item.ver {
        width: clamp(120px, 160/1024*100vw, 160px);
    }
    .photowall .s1 .wrap .imgWrap .item.hor {
        width: clamp(220px, 260/1024*100vw, 260px);
    }
    .photowall .s1 .wrap .imgWrap .item .txt {
        font-size: clamp(14px, 16/1024*100vw, 16px);
    }
}
@media screen and (max-width: 820px) {
    .photowall .s1 {
        height: auto;
        padding-top: 120px;
        padding-bottom: 80px;
    }
    .photowall .s1 .wrap .imgWrap {
        flex-direction: column;
    }
    .photowall .s1 .wrap .imgWrap .item:nth-child(odd) {
        transform: unset;
        margin-right: unset;
    }
    .photowall .s1 .wrap .imgWrap .item:nth-child(even) {
        transform: unset;
        margin-right: unset;
    }
    .photowall .s1 .wrap .imgWrap .item.hor {
        width: unset;
    }   
    .photowall .s1 .wrap .imgWrap .item.ver {
        width: unset;
    }
    .photowall .s1 .wrap .imgWrap .item {
        width: 100% !important;
        max-width: 450px;
    } 
    .photowall .s1 .wrap .imgWrap .item .txt {
        position: static;
        transform: translateY(0);
        padding-left: 0;
        font-size: clamp(16px, 18/820*100vw, 18px);
        padding-bottom: calc(80/18*1em);
    }
    .photowall .s1 .wrap .imgWrap .item .txt span {
        font-size: clamp(14px, 16/18*1em, 16px);
        padding-top: calc(10/16*1em);
    }
    .photowall .s1 .objWrap .obj:nth-child(2) {
        left: 50%;
        bottom: auto;
        top: 30%;
    }
    .photowall .s1 .objWrap .obj:nth-child(4) {
        right: 50%;
        top: 70%;
    }
}
@media screen and (max-width: 500px) {
    .photowall .s1 {
        margin-top: 0;
        padding-top: 80px;
        padding-bottom: 60px;
    }
    .photowall .s1 .wrap .imgWrap .item .txt {
        font-size: clamp(14px, 16/500*100vw, 16px);
    }
}
@media screen and (max-width: 360px) {
    .photowall .s1 .wrap .imgWrap .item .txt p {
        white-space: normal;
    }
    .photowall .s1 .wrap .imgWrap .item .txt p br {
        display: none;
    }
}

/*
--------------------------------
sample
--------------------------------
*/
.sample {
    background: #f5f1ed !important;
    overflow: hidden;
}
.sample .s1_pin {
    height: 400vh;
    overflow: hidden;
}
.sample .s1 {
    padding: 70px 0;
    height: 100vh;
    box-sizing: border-box;
}
.sample .s1 .wrap {
    height: 100%;
}
.sample .s1 .flx {
    display: flex; align-items: center;
    height: 100%;
}
.sample .s1 .flx .txt {
    flex-shrink: 0;
    width: 50%;
}
.sample .s1 .flx .txt .txt_in {
    display: flex; flex-direction: column;
    overflow: hidden;
}
.sample .s1 .flx .txt span {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: #351d06;
    opacity: .8;
    display: inline-block;
    white-space: nowrap;
}
.sample .s1 .flx .txt b {
    font-family: 'Urbanist';
    font-weight: 600;
    font-size: 100px;
    color: #000;
    padding-top: calc(15/100*1em);
    padding-bottom: calc(15/100*1em);
    white-space: nowrap;
}
.sample .s1 .flx .txt p {
    font-weight: 600;
    color: #000;
}
.sample .s1 .flx .txt p.kor {
    font-family: 'Noto Serif KR';
    font-size: 18px;
    padding-top: calc(10/18*1em);
    line-height: calc(30/18*1em);
}
.sample .s1 .flx .txt p.eng {
    font-family: 'Urbanist';
    font-size: 30px;
}
.sample .s1 .flx .imgWrap {
    flex-grow: 1;
    height: 100%;
    min-width: 0;
    display: flex; align-items: center; justify-content: flex-end;
    overflow: hidden;
    position: relative;
}
.sample .s1 .flx .imgWrap img {
    width: 1520px;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: right;
}
.sample .s1 .flx .imgWrap .overlay_txt {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 0;
}
.sample .s1 .flx .imgWrap .overlay_txt > * {
    opacity: 0;
    transform: translateY(100px);
} 
.sample .s1 .flx .imgWrap .overlay_txt .small {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 30px;
    letter-spacing: -0.02em;
    color: #fff;
    text-align: center;
    line-height: 1.4;
}
.sample .s1 .flx .imgWrap .overlay_txt .big {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 70px;
    letter-spacing: -0.02em;
    color: #fff;
    padding-top: calc(30/70*1em);
}
.sample .s1 .flx .imgWrap .overlay_txt .gray_txt {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 20px;
    line-height: calc(40/20*1em);
    letter-spacing: -0.02em;
    color: #fff;
    text-align: center;
}
/*
--------------------------------
hi_tec_c
--------------------------------
*/
.hi_tec_c .s1 .flx .imgWrap .overlay_txt {
    justify-content: flex-end;
}
.hi_tec_c .s1 .flx .imgWrap .overlay_txt .gray_txt {
    padding-top: calc(165/20*1em) ;
    padding-bottom: calc(70/20*1em);
}
/*
--------------------------------
pilot_custom
--------------------------------
*/
.pilot_custom .s1 .flx .imgWrap .overlay_txt .gray_txt {
    padding-top: calc(30/20*1em) ;
}
@media screen and (max-width: 1600px) {
    .sample .s1 .flx .imgWrap .overlay_txt .small {
        font-size: clamp(26px, 30/1600*100vw, 30px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .big {
        font-size: clamp(60px, 70/1600*100vw, 70px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .gray_txt {
        font-size: clamp(18px, 20/1600*100vw, 20px);
    }
}
@media screen and (max-width: 1440px) {
    .sample .s1 .flx .txt b {
        font-size: clamp(90px, 100/1440*100vw, 100px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .small {
        font-size: clamp(22px, 26/1440*100vw, 26px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .big {
        font-size: clamp(50px, 60/1440*100vw, 60px);
    }
}
@media screen and (max-width: 1280px) {
    .sample .s1 {
        padding: 80px 0 30px;
    }
    .sample .s1 .flx .txt b {
        font-size: clamp(80px, 90/1280*100vw, 90px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .small {
        font-size: clamp(20px, 22/1280*100vw, 22px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .gray_txt {
        font-size: clamp(16px, 18/1280*100vw, 18px);
    }
    .hi_tec_c .s1 .flx .imgWrap .overlay_txt .gray_txt {
        padding-top: calc(100/20*1em) ;
    }
}
@media screen and (max-width: 1024px) {
    .sample .s1 {
        padding: 80px 0 20px;
    }
    .sample .s1 .flx .txt b {
        font-size: clamp(65px, 80/1024*100vw, 80px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .small {
        font-size: clamp(18px, 20/1024*100vw, 20px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .big {
        font-size: clamp(40px, 50/1024*100vw, 50px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .gray_txt {
        font-size: clamp(14px, 16/1024*100vw, 16px);
    }
    .hi_tec_c .s1 .flx .imgWrap .overlay_txt .gray_txt {
        padding-top: calc(80/20*1em) ;
    }
}
@media screen and (max-width: 820px) {
    .sample .s1 .flx .txt {
        width: 90%;
    }
    .sample .s1 .flx .txt p.eng {
        font-size: clamp(20px, 25/820*100vw, 25px);
    }
    .sample .s1 .flx .txt p.kor {
        font-size: clamp(16px, 18/820*100vw, 18px);
    }
    .hi_tec_c .s1 .flx .imgWrap .overlay_txt {
        /* justify-content: center; */
    }
    .hi_tec_c .s1 .flx .imgWrap .overlay_txt .gray_txt {
        max-width: 530px;
        padding-left: calc(30/530*100%);
        padding-right: calc(30/530*100%);
    }
    .hi_tec_c .s1 .flx .imgWrap .overlay_txt .gray_txt br {
        display: none;
    }
    .sample .s1 .flx .imgWrap{ justify-content: center; }
}
@media screen and (max-width: 500px) {
    .sample .s1 .flx .txt span {
        font-size: clamp(16px, 18/500*100vw, 18px);
    }
    .sample .s1 .flx .txt b {
        font-size: clamp(52px, 65/500*100vw, 65px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .small {
        font-size: clamp(16px, 18/500*100vw, 18px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .big {
        font-size: clamp(30px, 40/500*100vw, 40px);
    }
}
@media screen and (max-width: 360px) {
    .sample .s1 .flx .txt span {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
    .sample .s1 .flx .txt b {
        font-size: clamp(40px, 50/360*100vw, 50px);
    }
    .sample .s1 .flx .txt p.eng {
        font-size: clamp(18px, 20/360*100vw, 20px);
    }
    .sample .s1 .flx .txt p.kor {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .small {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .big {
        font-size: clamp(25px, 30/360*100vw, 30px);
    }
    .sample .s1 .flx .imgWrap .overlay_txt .gray_txt {
        font-size: clamp(12px, 14/360*100vw, 14px);
    }
}

.sample .s2 {
    padding-top: 200px;
    padding-bottom: 190px;
    position: relative;
}
.sample .s2 .wrap {
    overflow: visible;
}
.sample .s2 .flx {
    display: flex; flex-direction: column;
    overflow: visible;
}
.sample .s2 .block {
    display: flex; align-items: flex-start;
    width: 100%;
}
.sample .s2 .block._3 {
    align-self: flex-end;
    justify-content: flex-end;
}
.sample .s2 .block + .block {
    margin-top: 200px;
}
.sample .s2 .block .txt {
    flex-shrink: 0;
    display: flex; flex-direction: column;
    width: 50%;
}
.sample .s2 .block._1 .txt {
    padding-top: calc(230/1520*100%);
}
.sample .s2 .block._2 .txt {
    padding-left: calc(285/1520*100%);
}
.sample .s2 .block._3 .txt {
    padding-top: calc(330/1520*100%);
    padding-left: calc(50/1520*100%);
}
.sample .s2 .block .txt b {
    font-family: 'Noto Serif KR';
    font-weight: 700;
    font-size: 36px;
    letter-spacing: -0.02em;
    color: #351d06;
    padding-bottom: calc(35/36*1em);
}
.sample .s2 .block .txt p {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 20px;
    line-height: calc(36/20*1em);
    letter-spacing: -0.02em;
    color: #351d06;
    opacity: .8;
}
.sample .s2 .block .txt p + p {
    padding-top: calc(15/20*1em);
}
.sample .s2 .block .img {
    flex-shrink: 0;
    position: relative;
}
.sample .s2 .block._1 .img {
    width: calc(700/1520*100%);
    margin-left: calc(160/1520*100%);
}
.sample .s2 .block._1 .img::after {
    content: '';
    display: block;
    padding-top: calc(467/700*100%);
}
.sample .s2 .block._3 .img {
    width: calc(900/1520*100%);
    margin-right: calc(60/1520*100%);
}
.sample .s2 .block._3 .img::after {
    content: '';
    display: block;
    padding-top: calc(480/900*100%);
}
.sample .s2 .block .img img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.sample .s2 .objWrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.sample .s2 .objWrap .obj {
    border-radius: 50%;
    position: absolute;
}
.sample .s2 .objWrap .obj::after {
    content: '';
    display: block;
    padding-top: 100%;
}
.sample .s2 .objWrap .obj:nth-child(1) {
    width: 410px;
    right: 0;
    top: 540px;
    transform: translateX(10%);
    background: #f1e6d8;
    opacity: .5;
    animation: sample_obj_ani_1 10s ease-in-out infinite;
}
@keyframes sample_obj_ani_1 {
    0% {
        transform: translateX(10%) translateY(0%);
    }
    50% {
        transform: translateX(10%) translateY(-20%);
    }
    100% {
        transform: translateX(10%) translateY(0%);
    }
}
.sample .s2 .objWrap .obj:nth-child(2) {
    width: 340px;
    left: calc(515/1520*100%);
    top: 55%;
    background: #c9bfb8;
    opacity: .2;
    animation: sample_obj_ani_2 10s ease-in-out infinite;
}
@keyframes sample_obj_ani_2 {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-20%);
    }
    100% {
        transform: translateY(0%);
    }
}
.sample .s2 .objWrap .obj:nth-child(3) {
    width: 180px;
    right: calc(677/1520*100%);
    top: 65%;
    background: #ead8c3;
    opacity: .4;
    animation: sample_obj_ani_3 10s ease-in-out infinite;
}
@keyframes sample_obj_ani_3 {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-20%);
    }
    100% {
        transform: translateY(0%);
    }
}
@media screen and (max-width: 1440px) {
    .sample .s2 {
        padding-top: 150px;
    }
    .sample .s2 .block + .block {
        margin-top: 150px;
    }
    .sample .s2 .block .txt {
        width: 60%;
    }
    .sample .s2 .block._1 .txt {
        padding-top: calc(150/1520*100%);
    }
    .sample .s2 .block._3 .txt {
        padding-top: calc(200/1520*100%);
    }
    .sample .s2 .block._1 .img {
        margin-left: calc(50/1520*100%);
    }
    .sample .s2 .block._3 .img {
        width: calc(600/1520*100%);
    }
}
@media screen and (max-width: 1280px) {
    .sample .s2 .block .txt {
        width: 65%;
    }
    .sample .s2 .block .txt b {
        font-size: clamp(34px, 36/1280*100vw, 36px);
    }
    .sample .s2 .block .txt p {
        font-size: clamp(18px, 20/1280*100vw, 20px);
    }
}
@media screen and (max-width: 1024px) {
    .sample .s2 {
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .sample .s2 .block + .block {
        margin-top: 120px;
    }
    .sample .s2 .block .txt {
        width: 70%;
    }
    .sample .s2 .block .txt b {
        font-size: clamp(30px, 34/1024*100vw, 34px);
    }
    .sample .s2 .block .txt p {
        font-size: clamp(16px, 18/1024*100vw, 18px);
    }
}
@media screen and (max-width: 820px) {
    .sample .s2 .block {
        flex-direction: column-reverse;
        align-items: center;
    }
    .sample .s2 .block._3 {
        flex-direction: column;
    }
    .sample .s2 .block._1 .img {
        width: 100%;
        max-width: 500px;
        margin-left: 0;
    }
    .sample .s2 .block._2 {
        align-self: flex-end;
        align-items: flex-end;
    }
    .sample .s2 .block._3 .img {
        width: 100%;
        max-width: 500px;
        margin-right: 0;
    }
    .sample .s2 .block .txt {
        width: 100%;
        max-width: 550px;
    }
    .sample .s2 .block._2 .txt {
        padding-left: 0;
    }
    .sample .s2 .block._3 .txt {
        padding-left: 0;
    }
    .sample .s2 .block .txt b {
        word-break: keep-all;
        line-height: 1.5;
        font-size: clamp(24px, 30/820*100vw, 30px);
    }
    .sample .s2 .block .txt p {
        /* font-size: clamp(14px, 16/820*100vw, 16px); */
    }
    .sample .s2 .block .txt p br {
        display: none;
    }
}
@media screen and (max-width: 500px) {
    .sample .s2 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .sample .s2 .block + .block {
        margin-top: 80px;
    }
    .sample .s2 .block .txt p {
        font-size: clamp(14px, 16/500*100vw, 16px);
        /* padding: 0 calc(20/16*1em); */
    }
}

/*
--------------------------------
passport
--------------------------------
*/

.passport {
    padding-bottom: 150px;
    overflow: hidden;
}
.passport .container {
    position: relative;
}
.passport .cont {
    padding-top: 100px;
    display: flex; align-items: center; justify-content: center;
}
.passport .cont .passport_img {
    position: relative;
    width: 100%;
    max-width: 519px;
}
.passport .cont .passport_img .txt {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
    text-align: right;
    padding-right: calc(60/16*1em);
    font-size: 16px;
    /* opacity: 0; */
}
.passport .cont .passport_img .txt p {
    font-family: 'Noto Serif KR';
    font-weight: 500;
    line-height: calc(28/16*1em);
    letter-spacing: -0.02em;
    color: #000;
    opacity: 0;
    transform: translateY(80px);
}
.passport .cont .passport_img .txt p + p {
    padding-top: calc(20/20*1em);
}
.passport .cont .passport_img .imgWrap {
    position: relative;
    width: 100%;
    user-select: none;
}
.passport .cont .passport_img .imgWrap::after {
    content: '';
    display: block;
    padding-top: calc(519/641*100%);
}
.passport .cont .passport_img .imgWrap .click_area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.3s ease-in-out;
}
.passport .cont .passport_img .imgWrap.last .click_area {
    opacity: 1;
}
.passport .cont .passport_img .imgWrap.last.motion .click_area {
    opacity: 0;
    pointer-events: none;
}
.passport .cont .passport_img .imgWrap .click_area .reset {
    font-size: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    padding: 0;
    transition: background .3s ease-in-out, color .3s ease-in-out;
}
.passport .cont .passport_img .imgWrap.last .click_area .reset {
    pointer-events: auto;
}
@media screen and (min-width: 821px) {
    .passport .cont .passport_img .imgWrap .click_area .reset:hover {
        background: #777777;
        color: #fff;
    }
}
.passport .cont .passport_img .imgWrap .img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(0%);
    width: 50%;
    height: 100%;
    display: flex;
    perspective: 1000px;
    transition: transform 1.3s ease-in-out;
}
.passport .cont .passport_img .imgWrap.first .img {
    transform: translateX(-50%);
}
.passport .cont .passport_img .imgWrap.last .img {
    transform: translateX(50%);
}
.passport .cont .passport_img .imgWrap.last.motion .img {
    transform: translateX(0%);
}
.passport .cont .passport_img .imgWrap .img::after {
    content: '';
    display: block;
    padding-top: calc(259/420*100%);
}
.passport .cont .passport_img .imgWrap .img .page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.4s ease-in-out;
    transform-origin: left center;
    /* overflow: hidden; */
    backface-visibility: hidden;
    cursor: pointer;
}
.passport .cont .passport_img .imgWrap .img .page:nth-child(1) img,
.passport .cont .passport_img .imgWrap .img .page:nth-child(2) img {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}
.passport .cont .passport_img .imgWrap .img .page:last-child img,
.passport .cont .passport_img .imgWrap .img .page:nth-last-child(2) img {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}
.passport .cont .passport_img .imgWrap .img .page > * {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
.passport .cont .passport_img .imgWrap .img .page:nth-child(odd) > * {
    border-radius: 0 15px 15px 0;
}
.passport .cont .passport_img .imgWrap .img .page:nth-child(even) > * {
    border-radius: 15px 0 0 15px;
}
.passport .cont .passport_img .imgWrap .img .page:nth-child(even) {
    backface-visibility: visible;
}
.passport .cont .passport_img .imgWrap .img .page:nth-child(even) img {
    transform: rotateY(180deg);
}
.passport .cont .passport_img .imgWrap .img .page.act {
    transform: rotateY(-180deg);
}
.passport .cont .passport_img .progress_bar {
    font-size: 16px;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    padding-top: calc(40/16*1em);
}
.passport .cont .passport_img .progress_bar .navi {
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: calc(20/16*1em); gap: calc(20/16*1em);
}
.passport .cont .passport_img .progress_bar .navi .pass_btn {
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #351d06;
    border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    cursor: pointer;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    transition: background .3s ease-in-out, color .3s ease-in-out;
}
@media screen and (min-width: 821px) {
    .passport .cont .passport_img .progress_bar .navi .pass_btn:hover {
        background: #777777;
        color: #fff;
    }
}
.passport .cont .passport_img .progress_bar .progress_bar_inner {
    width: 60px;
    --cir: 10px;
    height: var(--cir);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.passport .cont .passport_img .progress_bar .progress_bar_inner::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #351d06;
    opacity: .2;
}
.passport .cont .passport_img .progress_bar .progress_bar_inner .dot {
    width: var(--cir);
    height: var(--cir);
    background: #351d06;
    border-radius: 50%;
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.passport .objWrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.passport .objWrap .obj {
    position: absolute;
    border-radius: 50%;
}
.passport .objWrap .obj::after {
    content: '';
    display: block;
    padding-top: 100%;
}
.passport .objWrap .obj:nth-child(1) {
    width: 250px;
    background: #f0eae7;
    right: calc(455/1920*100vw);
    bottom: 0px;
    animation: passport_obj_ani_1 10s ease-in-out infinite;
}
.passport .objWrap .obj:nth-child(2) {
    width: 120px;
    background: #dcd3ce;
    right: calc(415/1920*100vw);
    bottom: 180px;
    opacity: .3;
    animation: passport_obj_ani_2 8s ease-in-out infinite;
}
@keyframes passport_obj_ani_1 {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-20%);
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes passport_obj_ani_2 {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(20%);
    }
    100% {
        transform: translateY(0%);
    }
}
@media screen and (max-width: 1440px) {
    .passport .cont .passport_img {
        max-width: calc(510/1520*100vw);
    }
    .passport .cont .passport_img .txt {
        padding-right: calc(40/16*1em);
        width: calc(550/1920*100vw);
        white-space: normal;
    }
}
@media screen and (max-width: 1280px) {
    .passport .cont .passport_img .txt {
        font-size: clamp(14px, 16/1280*100vw, 16px);
        padding-right: calc(20/16*1em);
    }
    .passport .cont .passport_img .txt br {
        display: none;
    }
}
@media screen and (max-width: 1024px) {
    .passport .cont {
        padding-top: 0px;
    }
    .passport .objWrap .obj:nth-child(1) {
        bottom: auto;
        top: 448px;
    }
    .passport .objWrap .obj:nth-child(2) {
        bottom: auto;
        top: 290px;
    }
    .passport .cont .passport_img {
        max-width: calc(450/1024*100vw);
        display: flex; flex-direction: column;
        align-items: center;
    }
    .passport .cont .passport_img .txt {
        display: none;
        order: 2;
        position: relative;
        right: auto;
        top: auto;
        transform: translateY(0);
        padding-right: 0;
        padding-top: calc(40/16*1em);
        text-align: center;
        align-items: center;
        white-space: normal;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        padding-bottom: calc(50/16*1em);
        font-size: clamp(14px, 16/1024*100vw, 16px);
    }
    .passport .cont .passport_img .txt p + p {
        padding-top: calc(10/16*1em);
    }
    .passport .cont .passport_img .txt br {
        display: none;
    }
    .passport .cont .passport_img .progress_bar .progress_bar_inner p {
        font-size: clamp(14px, 16/1024*100vw, 16px);
    }
}
@media screen and (max-width: 820px) {
    .passport .cont {
        padding-top: 30px;
    }
    .passport .cont .passport_img {
        max-width: calc(600/820*100vw);
    }
    .passport .cont .passport_img .progress_bar .navi {
        justify-content: space-between;
    }
    .passport .cont .passport_img .progress_bar .navi .pass_btn {
        display: flex;
    }
    .passport .cont .passport_img .txt {
        width: clamp(300px, 300/500*100vw, 400px);
        font-size: clamp(14px, 16/820*100vw, 16px);
    }
    .passport .cont .passport_img .progress_bar {
        font-size: clamp(14px, 16/820*100vw, 16px);
    }
}
@media screen and (max-width: 500px) {
    .passport {
        padding-bottom: 80px;
    }
    .passport .cont {
        padding-top: 20px;
    }
    .passport .cont .passport_img {
        max-width: calc(400/500*100vw);
    }
    .passport .cont .passport_img .txt {
        width: 100%;
        padding-top: 0;
    }
}
@media screen and (max-width: 360px) {
    .passport .cont {
        padding-top: 0;
    }
    .passport .cont .passport_img .progress_bar {
        line-height: 1.4;
    }
}


/*
--------------------------------
seoyura
--------------------------------
*/
.seoyura {
    background: #f5f1ed !important;
    overflow: hidden;
}
.seoyura .s1 {
    margin-top: 100px;
    position: relative;
}
.seoyura .s1 .objWrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.seoyura .s1 .objWrap .obj {
    position: absolute;
    border-radius: 50%;
}
.seoyura .s1 .objWrap .obj::after {
    content: '';
    display: block;
    padding-top: 100%;
}
.seoyura .s1 .objWrap .obj:nth-child(1) {
    width: 510px;
    right: 0;
    top: 0;
    transform: translateX(10%);
    background: #f1e6d8;
    opacity: .5;
    animation: seoyura_obj_ani_1 10s ease-in-out infinite;
}
.seoyura .s1 .objWrap .obj:nth-child(2) {
    width: 275px;
    left: calc(700/1920*100vw);
    top: 60%;
    background: #c9bfb8;
    opacity: .2;
    animation: seoyura_obj_ani_2 7s ease-in-out infinite;
}

@keyframes seoyura_obj_ani_1 {
    0% {
        transform: translateY(0%) translateX(10%);
    }
    50% {
        transform: translateY(-20%) translateX(10%);
    }
    100% {
        transform: translateY(0%) translateX(10%);
    }
}
@keyframes seoyura_obj_ani_2 {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(20%);
    }
    100% {
        transform: translateY(0%);
    }
}
.seoyura .s1 .wrap {
    position: relative;
    z-index: 1;
}
.seoyura .s1 .wrap .title {
    display: flex; flex-direction: column;
}
.seoyura .s1 .wrap .title span {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: #351d06;
    padding-left: calc(5/18*1em);
    display: inline-block;
}
.seoyura .s1 .wrap .title b {
    font-family: 'Urbanist';
    font-weight: 600;
    font-size: 100px;
    line-height: calc(110/100*1em);
    color: #000;
    padding-top: calc(20/100*1em);
}
.seoyura .s1 .wrap .imgWrap {
    display: flex; justify-content: space-between;
}
.seoyura .s1 .wrap .imgWrap .left {
    flex-shrink: 0;
    width: 50%;
    margin-top: 355px;
    padding-right: 60px;
    box-sizing: border-box;
}
.seoyura .s1 .wrap .imgWrap .right {
    flex-shrink: 0;
    width: 50%;
    padding-left: 60px;
    box-sizing: border-box;
}
.seoyura .s1 .wrap .imgWrap .imgItem {
    display: flex; flex-direction: column;
    width: 100%;
}
.seoyura .s1 .wrap .imgWrap .imgItem .img {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.seoyura .s1 .wrap .imgWrap .imgItem .img::after {
    content: '';
    display: block;
    padding-top: calc(470/700*100%);
}
.seoyura .s1 .wrap .imgWrap .imgItem .img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.seoyura .s1 .wrap .imgWrap .imgItem .txt {
    display: flex; flex-direction: column;
}
.seoyura .s1 .wrap .imgWrap .imgItem .txt span {
    font-family: 'Urbanist';
    font-weight: 600;
    font-size: 26px;
    color: #000;
    padding-top: calc(15/26*1em);
    padding-bottom: calc(7/26*1em);
}
.seoyura .s1 .wrap .imgWrap .imgItem .txt p {
    font-family: 'Urbanist';
    font-size: 16px;
    color: #000;
    opacity: .8;
}
.seoyura .s1 .wrap .introduction {
    padding-top: 155px;
}
.seoyura .s1 .wrap .introduction .name {
    display: flex; flex-direction: column;
}
.seoyura .s1 .wrap .introduction .name span {
    font-family: 'Urbanist';
    font-size: 20px;
    color: #000;
}
.seoyura .s1 .wrap .introduction .name b {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 60px;
    color: #000;
    letter-spacing: -0.02em;
    padding-top: calc(10/60*1em);
    padding-bottom: calc(40/60*1em);
}
.seoyura .s1 .wrap .introduction .txt {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: #000;
    opacity: .8;
    line-height: calc(34/20*1em);
}
.seoyura .s1 .wrap .introduction .txt p + p {
    padding-top: calc(20/20*1em);
}
.seoyura .s1 .wrap .introduction .sign {
    display: flex; align-items: center;
    padding-top: calc(40/16*1em);
    font-size: 16px;
    color: #000;
    opacity: .8;
}
.seoyura .s1 .wrap .introduction .sign span {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    letter-spacing: -0.02em;
    padding-left: calc(10/16*1em);
    text-decoration: underline;
    text-underline-offset: calc(10/16*1em);
    text-decoration-color: #000;
    text-decoration-thickness: 1px;
}
@media screen and (max-width: 1440px) {
    .seoyura .s1 .wrap .imgWrap .imgItem .txt span {
        font-size: clamp(24px, 26/1440*100vw, 26px);
    }
    .seoyura .s1 .wrap .introduction .txt {
        font-size: clamp(18px, 20/1440*100vw, 20px);
    }
}
@media screen and (max-width: 1280px) {
    .seoyura .s1 .wrap .imgWrap .left {
        padding-right: clamp(15px, 15/1280*100vw, 15px);
        margin-top: clamp(160px, 250/1280*100vw, 250px);
    }
    .seoyura .s1 .wrap .imgWrap .right {
        padding-left: clamp(15px, 15/1280*100vw, 15px);
    }
    .seoyura .s1 .wrap .title b {
        font-size: clamp(80px, 100/1280*100vw, 100px);
    }
    .seoyura .s1 .wrap .introduction .name span {
        font-size: clamp(18px, 20/1280*100vw, 20px);
    }
    .seoyura .s1 .wrap .introduction .name b {
        font-size: clamp(45px, 55/1280*100vw, 55px);
    }
    .seoyura .s1 .wrap .introduction .txt {
        font-size: clamp(16px, 18/1280*100vw, 18px);
    }
}
@media screen and (max-width: 1024px) {
    .seoyura .s1 .wrap .title b {
        font-size: clamp(70px, 80/1024*100vw, 80px);
        padding-bottom: calc(80/80*1em);
    }
    .seoyura .s1 .wrap .imgWrap {
        justify-content: flex-start;
        flex-direction: column;
    }
    .seoyura .s1 .wrap .imgWrap .left {
        width: 100%;
        margin-top: 0;
        padding-right: 0;
        padding-bottom: 40px;
        display: flex; flex-direction: column;
    }
    .seoyura .s1 .wrap .imgWrap .right {
        width: 100%;
        padding-left: 0;
        display: flex; flex-direction: column;
        align-items: flex-end;
    }
    .seoyura .s1 .wrap .imgWrap .imgItem {
        max-width: 500px;
    }
    .seoyura .s1 .wrap .introduction {
        padding-top: 100px;
        align-self: flex-start;
    }
    .seoyura .s1 .wrap .introduction .txt {
        font-size: clamp(18px, 20/1024*100vw, 20px);
    }
}
@media screen and (max-width: 820px) {
    .seoyura .s1 {
        margin-top: 80px;
    }
    .seoyura .s1 .wrap .title b {
        font-size: clamp(60px, 70/820*100vw, 70px);
    }
    .seoyura .s1 .wrap .introduction .txt {
        font-size: clamp(15px, 18/820*100vw, 18px);
    }
    .seoyura .s1 .wrap .introduction .sign {
        font-size: clamp(14px, 16/820*100vw, 16px);
    }
}
@media screen and (max-width: 500px) {
    .seoyura .s1 .wrap .title b {
        font-size: clamp(50px, 60/500*100vw, 60px);
    }
    .seoyura .s1 .wrap .introduction .txt br {
        display: none;
    }
}
@media screen and (max-width: 360px) {
    .seoyura .s1 .wrap .title span {
        font-size: clamp(16px, 18/360*100vw, 18px);
    }
    .seoyura .s1 .wrap .title b {
        font-size: clamp(40px, 50/360*100vw, 50px);
    }
    .seoyura .s1 .wrap .imgWrap .imgItem .txt span {
        font-size: clamp(20px, 22/360*100vw, 22px);
    }
    .seoyura .s1 .wrap .imgWrap .imgItem .txt p {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
    .seoyura .s1 .wrap .introduction .name span {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
    .seoyura .s1 .wrap .introduction .name b {
        font-size: clamp(35px, 40/360*100vw, 40px);
    }
    .seoyura .s1 .wrap .introduction .txt {
        font-size: clamp(14px, 16/360*100vw, 16px);
    }
}

.seoyura .s2 {
    position: relative;
    padding-top: 235px;
    padding-bottom: 150px;
}
.seoyura .s2 .wrap {
    position: relative;
    z-index: 1;
}
.seoyura .s2 .wrap .title {
    display: flex; flex-direction: column;
}
.seoyura .s2 .wrap .title b {
    font-family: 'Urbanist';
    font-weight: 600;
    font-size: 80px;
    color: #351d06;
    padding-bottom: calc(35/80*1em);
}
.seoyura .s2 .wrap .title p {
    font-family: 'Noto Serif KR';
    font-weight: 600;
    font-size: 20px;
    line-height: calc(34/20*1em);
    color: #000;
    opacity: .8;
}
.seoyura .s2 .wrap .imgWrap {
    margin-top: 180px;
}
.seoyura .s2 .wrap .imgWrap .tab {
    display: flex; align-items: center;
    font-size: 30px;
}
.seoyura .s2 .wrap .imgWrap .tab .tabItem {
    font-family: 'Urbanist';
    font-weight: 600;
    color: #000;
    opacity: .2;
    transition: all 0.3s ease;
    cursor: pointer;
}
.seoyura .s2 .wrap .imgWrap .tab .tabItem.active {
    opacity: 1;
}
.seoyura .s2 .wrap .imgWrap .tab .line {
    width: 4px;
    height: calc(26/30*1em);
    background: #000;
    opacity: .2;
    margin-left: calc(20/30*1em);
    margin-right: calc(20/30*1em);
}
.seoyura .s2 .wrap .imgWrap .swiper_wrap {
    margin-top: 30px;
    position: relative;
    overflow: visible;
}
.seoyura .s2 .wrap .imgWrap .swiper_wrap .s {
    opacity: 0;
    transition: all 0.6s ease;
    overflow: visible;
    pointer-events: none;
    user-select: none;
}
.seoyura .s2 .wrap .imgWrap .swiper_wrap .s .swiper {
    overflow: visible;
}
.seoyura .s2 .wrap .imgWrap .swiper_wrap .s.active {
    opacity: 1;
    pointer-events: auto;
}
.seoyura .s2 .wrap .imgWrap .swiper_wrap .s._2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.seoyura .s2 .wrap .imgWrap .swiper_wrap .s .swiper .swiper-slide {
    width: 320px;
}
.seoyura .s2 .wrap .imgWrap .swiper_wrap .s .swiper .swiper-slide .img {
    width: 100%;
    position: relative;
}
.seoyura .s2 .wrap .imgWrap .swiper_wrap .s .swiper .swiper-slide .img::after {
    content: '';
    display: block;
    padding-top: calc(240/320*100%);
}
.seoyura .s2 .wrap .imgWrap .swiper_wrap .s .swiper .swiper-slide .img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.seoyura .s2 .objWrap .obj {
    position: absolute;
    border-radius: 50%;
}
.seoyura .s2 .objWrap .obj::after {
    content: '';
    display: block;
    padding-top: 100%;
}
.seoyura .s2 .objWrap .obj:nth-child(1) {
    width: 165px;
    right: calc(370/1920*100vw);
    top: 30%;
    background: #ead8c3;
    animation: seoyura_obj_ani2_1 10s ease-in-out infinite;
}
.seoyura .s2 .objWrap .obj:nth-child(2) {
    width: 380px;
    right: calc(444/1920*100vw);
    top: 33%;
    background: #dcd3ce;
    opacity: .3;
    animation: seoyura_obj_ani2_2 7s ease-in-out infinite;
}

@keyframes seoyura_obj_ani2_1 {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(-20%);
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes seoyura_obj_ani2_2 {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(20%);
    }
    100% {
        transform: translateY(0%);
    }
}
@media screen and (max-width: 1280px) {
    .seoyura .s2 {
        padding-top: 200px;
    }
    .seoyura .s2 .wrap .title p {
        font-size: clamp(18px, 20/1280*100vw, 20px);
    }
    .seoyura .s2 .wrap .imgWrap {
        margin-top: 150px;
    }
}
@media screen and (max-width: 1024px) {
    .seoyura .s2 {
        padding-top: 150px;
    }
    .seoyura .s2 .wrap .title b {
        font-size: clamp(60px, 70/1024*100vw, 70px);
    }
    .seoyura .s2 .wrap .title p {
        font-size: clamp(16px, 18/1024*100vw, 18px);
    }
    .seoyura .s2 .wrap .imgWrap {
        margin-top: 120px;
    }
    .seoyura .s2 .wrap .imgWrap .tab {
        font-size: clamp(24px, 26/1024*100vw, 26px);
    }
}
@media screen and (max-width: 820px) {
    .seoyura .s2 {
        padding-bottom: 100px;
    }
    .seoyura .s2 .wrap .title b {
        font-size: clamp(50px, 60/820*100vw, 60px);
    }
    .seoyura .s2 .wrap .title p {
        font-size: clamp(15px, 16/820*100vw, 16px);
    }
    .seoyura .s2 .wrap .imgWrap {
        margin-top: 100px;
    }
    .seoyura .s2 .wrap .imgWrap .tab {
        font-size: clamp(20px, 22/820*100vw, 22px);
    }
    .seoyura .s2 .wrap .imgWrap .swiper_wrap .s .swiper .swiper-slide {
        width: 280px;
    }
}
@media screen and (max-width: 500px) {
    .seoyura .s2 {
        padding-top: 80px;
    }
    .seoyura .s2 .wrap .title p br {
        display: none;
    }
    .seoyura .s2 .wrap .imgWrap {
        margin-top: 80px;
    }
    .seoyura .s2 .wrap .imgWrap .swiper_wrap .s .swiper .swiper-slide {
        width: 200px;
    }
}
@media screen and (max-width: 360px) {
    .seoyura .s2 .wrap .title p {
        font-size: clamp(14px, 15/360*100vw, 15px);
    }
}


/* popup */
.swiperPop{ position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100vh; box-sizing: border-box; color: #fff; display: none;  }
.swiperPop .bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.9); z-index: 0; cursor: pointer; }
.swiperPop .popinn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 845px; z-index: 1; }
.swiperPop .popinn .rel{ position: relative; width: 100%; height: 100%; display: flex; align-items: center; }
.swiperPop .popinn .rel .btn{ font-size: 30px; color: #fff; padding: 10px; box-sizing: border-box; cursor: pointer; transform: translateY(-120%); }
.swiperPop .popinn .rel .btn._prev{ left: 0; }
.swiperPop .popinn .rel .btn._next{ right: 0; }

.swiperPop .popinn .rel .swiper{ margin: 0 40px; box-sizing: border-box; box-sizing: border-box; }
.swiperPop .popinn .rel .swiper .photo{ text-align: center; display: flex; align-items: center; justify-content: center; height: 50vh; box-sizing: border-box; overflow: hidden; }
.swiperPop .popinn .rel .swiper .photo img{ height: 100%; width: 100%; object-fit: contain; }
.swiperPop .popinn .rel .swiper .swiper-slide dl{ text-align: center; width: 100%; padding-top: 35px; }
.swiperPop .popinn .rel .swiper .swiper-slide dl dt{ font-size: 20px; letter-spacing: -0.02em; color: rgba(255,255,255,0.6); }
.swiperPop .popinn .rel .swiper .swiper-slide dl dd{ font-size: 24px; letter-spacing: -0.02em; color: #fff; margin-top: 10px; line-height: 1.4; }

@media screen and (max-width: 1280px){
    .swiperPop .popinn .rel .swiper{ margin: 0 20px; }
    .swiperPop .popinn .rel .swiper .swiper-slide dl{ padding-top: 25px; }
    .swiperPop .popinn .rel .swiper .swiper-slide dl dt{ font-size: 18px; }
    .swiperPop .popinn .rel .swiper .swiper-slide dl dd{ font-size: 20px; }
}

@media screen and (max-width: 820px){
    .swiperPop .popinn .rel .swiper{ margin: 0 10px; }
    .swiperPop .popinn .rel .swiper .swiper-slide dl{ padding-top: 15px; }
    .swiperPop .popinn .rel .swiper .swiper-slide dl dt{ font-size: 14px; }
    .swiperPop .popinn .rel .swiper .swiper-slide dl dd{ font-size: 18px; }
    .swiperPop .popinn .rel .btn{ font-size: 24px; }
}

@media screen and (max-width: 500px){
    .swiperPop .popinn .rel .btn{ font-size: 20px; padding: 5px; }
    .swiperPop .popinn .rel .swiper .swiper-slide dl dd{ font-size: 16px; margin-top: 5px; }
}