.btn_wr {
    cursor: pointer;
} 

/* font */

.notosanskr {
    font-family: 'Noto Sans KR', sans-serif !important;
}




/* sec1 */


.main .sec1 {
    width: 100%;
    height: 100vh;
    min-width: 900px;
    min-height: 900px;
    position: relative;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.sec1 p, .sec1 span, .sec1 a, .sec1 h4 {
    color: #fff;
}

.main .sec1 .swiper {
    height: 100%;
    position: relative;
}

.main .sec1 .swiper-slide .bg_wr {
    width: 100%;
    height: 100%;

    position: relative;
}

.bg_wr > img {
    width: 34%;
    min-width: 500px;
    max-width: 700px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main .sec1 .swiper-slide .img_wr {
    width: 100%;
    height: 100%;
}

.main .sec1 .swiper-slide .img_wr img {
    width: 28%;
    min-width: 380px;
    max-width: 590px;
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.main .sec1 .txt_wr_side {
    width: calc(100% - 120px);

    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    opacity: 0.7;
}

.txt_wr_side > span {
    display: flex;
    align-items: center;
}

.txt_wr_side .vertxt1_eng {
    transform: rotate(180deg) translatey(35%);
}

.txt_wr_side .vertxt1_eng img {
    margin-top: 20px;
    transform: rotate(180deg);
}

.txt_wr_side .vertxt1 > img {
    margin-top: 15px;
}

.txt_wr_side .vertxt2 > img  {
    margin-bottom: 15px;
}

.main .sec1 .swiper-slide .txt_wr_bottom {
    position: absolute;
    top: 82%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.main .sec1 .swiper-button-next {
    right: 15%;
}
.main .sec1 .swiper-button-prev {
    left: 15%;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 16px !important;
    font-weight: 700;
}

.swiper-pagination {
    display: flex;
    align-items: center;
}

.main .sec1 .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap,10px) !important;
    background: var(--swiper-pagination-bullet-inactive-color, #fff) !important;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .4) !important;
}

.main .sec1 .swiper-pagination-bullet-active {
    border: 2px solid #fff;
    background: transparent !important;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1) !important;
}


:root {
    --swiper-theme-color: rgba(255, 255, 255, 0.4) !important;
}

.swiper-pagination {
    width: auto !important;
    left: 50% !important;
    transform: translatex(-50%) !important;
    top: 85%;
}

.txt_wr_bottom h4 {
    margin-bottom: 15px;
}


.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* sec2 */

.main .sec2 {
    min-width: 900px;
    padding: 120px 0 80px 0;
    /* background-color: #000; */
    background-size: cover;
}

.main .sec2 .tit {
    color: #333;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 60px;
}
.main .sec2 .tit h3 {
    margin-bottom: 20px;
}
.swiper-wrapper {
    align-content: stretch;
}

.main .sec2 .cont .swiper-slide {
    background-color: rgba(20, 20, 20, 0.5);

    height: auto !important;
    color: #fff;
    padding: 30px 20px ;
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content:space-between;
 
    
}

.main .sec2 .swiper {
    overflow: unset !important;
}

.main .sec2 .swiper-container {
    padding-bottom: 64px;
    position: relative;
    overflow: hidden !important;
    /* border: 1px solid red; */

}

.main .sec2 .cont .swiper-slide a{
    width: calc(100% - 50px);
    height: 44px;
    background-color: #000;
    color: #fff;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;


} 

.main .sec2 .cont .swiper-slide a:hover {
    background-color: #fff;
}

.main .sec2 .cont .swiper-slide a:hover {
    color:#000;
}




.main .sec2 .swiper-button-next {
    top: 40%;
    right: -70px;
    color: #333 !important;
}
.main .sec2 .swiper-button-prev {
    top: 40%;
    left: -70px;
    color: #333 !important;
}
.main .sec2 .swiper-pagination {
    bottom: 0px;
    top: unset !important;
}

.main .sec2 .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap,10px) !important;
    background: var(--swiper-pagination-bullet-inactive-color, #333) !important;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1) !important;
}

.main .sec2 .swiper-pagination-bullet-active {
    border: 2px solid #333;
    box-sizing: content-box;
    background: #dbdbdb !important;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1) !important;
}





/* sec3 */

.main .sec3 {
    padding: 140px 0;
 }
 
 
 .main .sec3 > .wr {
     display: flex;
     flex-flow: row;
 }
 
 .main .sec3 .txt_wr {
     margin-right: 100px;
 }
 
 .main .sec3 .txt_wr .tit {
     margin-bottom: 40px;
 }
 
 .main .sec3 .txt_wr .tit h2 {
     font-weight: 400;
     line-height: 1.45;
 }
 
 .main .sec3 .txt_wr .tit h2 > b {
     font-weight: 700;
 }
 
 .main .sec3 .txt_wr .cont {
     margin-bottom: 40px;
     line-height: 1.75;
 }
 
 .main .sec3 .txt_wr .cont p:first-child {
     margin-bottom: 22px;
 }
 
 .main .sec3 .txt_wr a{
     display: inline-block;

     border: 2px solid #333;
     text-transform: capitalize;
     font-weight: 700;
     line-height: 0.75;
     width: 100px;
     height: 44px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
 }


 
 .main .sec3 .txt_wr a:hover {
     color: #fff;
    background-color: #000;    
}
 
 .main .sec3 .img_wr {
     width: 50%;
     display: flex;
     flex-direction: column-reverse;
     padding-bottom: 60px;
 
 }


/* sec4 */

.main .sec4 {
    width: 100%;
    min-width: 900px;
    padding: 140px 0 0 0 ;
    background-color: #000;
    color: #fff;
    display: none;
}

.sec4 a {
    color: #fff;
}

.sec4 h4 {
    font-size: 20px;
    font-weight: 400;
}

.main .sec4 .tit {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 60px;
}

.main .sec4 > .wr {
    width: 100% !important;
    max-width: unset !important;
}

.main .sec4 .tit h3 {
    margin-bottom: 20px;
}


.main .sec4 .cont ul {
    width: 100%;
    display: flex;
    flex-flow: row;
    min-height: 400px;
}

.main .sec4 .cont li {
    background-repeat: no-repeat;
    background-size: cover;
}

.main .sec4 .cont li:nth-child(1) {
    width: 33.33%;
    display: flex;
    justify-content: flex-end;
}

.main .sec4 .cont li:nth-child(4) {
    width: 33.33%;
}

.main .sec4 .cont li .li_wr {
    width: 50%;
    height: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}


.main .sec4 .cont li:nth-child(2), .main .sec4 .cont li:nth-child(3) {
    width: 16.665%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.main .sec4 .cont li p {
    text-transform: capitalize;
    border-bottom: 10px;
}
.main .sec4 .cont li h4 {
    margin-bottom: 50px;
}

.main .sec4 .cont li a {
    display: flex;
    flex-flow: column;
    align-items: center;
}
@media (max-width: 1024px) {

    h3, h4 {
        line-height: 1;
        word-break: keep-all;
    }

    p {
        font-size: 14px;
    }

    h4 {
        font-size: 20px;
        
    }

    h3 {
        font-size: 24px;
    }

    h2 {
        font-size: 28px;
    }

    
    .main .sec1 {
        min-width: 375px ;
        min-height: unset;
    }

    .swiper-wrapper {
        width: 375px ;
    }

    .main .sec1 .txt_wr_side {
        display: none ;
    }

    .main .sec1 .swiper-button-prev,
    .main .sec1 .swiper-button-next {
        display: none;
    }


    .main .sec2 {
        min-width: 375px;
        padding: 60px 0 ;
    }


    .bg_wr > img {
        width: 50%;
        min-width: 340px;
    }

    .main .sec1 .swiper-slide .img_wr img {
        width: 40%;
        min-width: 300px;
    }

    .main .sec1 .swiper-slide .txt_wr_bottom {
        top: 78%;
        max-width: 300px;
    }
    .main .sec2 .swiper-button-prev {
        left: -10%;
    }

    .main .sec2 .swiper-button-next {
        right: -10%;
    }

    .main .sec2 .tit {
        margin-bottom: 30px;
    }

    .main .sec2 .tit h3 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .main .sec3 {
        padding: 80px 0;
    }

    .main .sec3 > .wr {
        flex-flow: column;
        align-items: center;
    }

    
    .main .sec3 .txt_wr {
        text-align: center;
        margin-right: 0;
        margin-bottom: 40px;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }


    .main .sec3 .img_wr {
        padding-bottom: 0;
    }

    .main .sec3 .txt_wr .cont p {
        max-width: 360px;
    }

    .main .sec4 {
        min-width: 375px;
        padding: 80px 0 0 0;
    }

    .main .sec4 .cont ul {
         flex-flow: column;
    }

    .main .sec4 .cont li {
        width: 100% !important;
        padding: 40px 0;
    }

    .main .sec4 .cont li:nth-child(1)
     {
        justify-content: center;
    }
    
    .main .sec4 .cont li .li_wr
    {
       width: 100%;
    }
    
}