
body {
    height:auto;

}
main {
    margin-left: 216px;
    word-break: keep-all;
}
h2 {
    font-size: 70px;
    font-weight: 700;
    display: inline-block;
    position: relative;
    padding: 0 20px;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}
h2 span {
    background-color: #B33435;
    display: block;
    height: 30px;
    width: 100%;
    position: absolute;
    bottom: 5px;
    left: 0;
    z-index: -1;
}
h3 {
    font-size: 65px;
    margin-bottom: 50px;
    line-height: 1.4;
}
h3 span {
    font-size: 70px;
    font-weight: 700;
}
h4 {
    font-size: 28px;
    font-weight: 700;
    background-color: #B33435;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
    width: 100%;
    border-radius: 10px;
    padding-left: 49px;
    line-height: 46px;
    margin-bottom: 10px;
}

.header .menu-list{
    position: relative;
    margin-top:50px;
}

.portfolio{
    position:relative;
    width:1013px;
    margin:0 auto;
    margin-top:83px;
}
.portfolio:after{
    position:absolute;
    right:-60px; top:-20px;
    content:'';
    width:500px ;height:500px;
    background:url("../image/image_content_box.svg") no-repeat;
    background-size:cover;
    background-position:top;
    z-index:-1;
}
.pagetop {
    width: 100%;
}
h1 {    
    font-size: 50px; font-weight: 500;
}
#youtube_iframe{
    width:100%; height:100%;
}
.aspect-ratio-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 비율 */
}
  
.aspect-ratio-box-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.swiper-container-wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    overflow: hidden;
    background-color: coral;
    margin: 0 auto;
}

.swiper-wrapper {
}
.gallery-top .swiper-slide { 
    width: 100% !important;
    margin: 0;
    text-align: center;
    background-size: cover;
    background-position: center;
    /* Center slide text vertically */
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    /* Slide content */
}
.swiper-button-next:after, .swiper-button-prev:after {
}
.swiper-slide .title {
    opacity: 0;
}
.swiper-slide-active .title {
    opacity: 1;
}
.swiper-slide-next .title {
    display: none !important;
}
.swiper-slide-active .title {
    margin-bottom: 0.5rem;
    font-size: 24px;
    color: #000;
    width: 100%;
    height: 100%;
}
.swiper-slide-active .description {
    font-size: 16px;
    color: #777;
}

.gallery-top {
    width: 100%;
    height: 70%;
}

.gallery-thumbs {
    position:relative;
    width: 100%;
    padding:10px 0;
    margin-top:10px;
    overflow:hidden;
}
.gallery-thumbs .swiper-wrapper {
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}
.gallery-thumbs .swiper-slide {
    border-radius:10px;
    width:100%;
    overflow:hidden;
    cursor:pointer;
}
.gallery-thumbs .swiper-slide .image-wrap{
    width:100%;
    padding-top: 56.25%; /* 16:9 비율 */
}
.gallery-thumbs .swiper-slide img{
    position:absolute;
    width:100%;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
}
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.sub_iframe {
    pointer-events: none;
}



.main_contents {
    position:relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    margin-bottom: 100px;
    padding: 5% 0;
}
/* .main_contents:nth-child(1) {
    background-color: coral;
}
.main_contents:nth-child(2) {
    background-color: green;
}
.main_contents:nth-child(3) {
} */
.maintxt {}
.contents_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 100px;
}
.text_box {
    max-width: 400px;
    margin-right: 20px;
}
.text_box p {
    font-size: 25px;
    font-weight: 500;
    line-height: 1.3;
}
.sequence {
    width: 50%;
    max-width: 500px;
} 
.contents4 .contents_box {
    padding-right: 50px;
}
.sequence4 {
    width: 100%; /* 이미지 너비를 100%로 설정하여 반응형 크기 조절 */
    max-width: 600px; /* 최대 너비 설정 (원하는 값으로 조절) */
    height: 100%; /* 높이를 자동으로 조절하여 비율 유지 */
    height: 600px;
    max-width: 600px;
    /* 이미지 배경 설정 */
    background-image: url(../image/process.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.sequence4 .content {
    max-width: 500px;
    
    
    /* 가운데 정렬 설정 */
    
    /* max-width: 600px;
    height: 600px;
    background-image: url(../image/process.svg);
    background-size: contain;
    background-position: center; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
}
.sequence li {}

.sequence .arrow {
    text-align: center;
    margin-top: 3%;
}
.sequence .arrow img {}
/* .sequence li::after {
    content: '';
    width: 17px;
    height: 17px;
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
    display: inline-block;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 0px;
} */
/* .sequence li:nth-child(4):after,
.sequence li:nth-child(5):after, 
.sequence li:nth-child(6):after {
    transform: rotate(225deg);
    right: -5px;
} */
.number {
    font-style: italic;
    color: #B33435;
    font-size: 50px;
    font-weight: 900;
    margin-bottom: -8px;
    margin-left: 10px;
}

.text {
    font-size: 22px;
    height: 11rem;
    font-weight: 700;
    background-color: #733434;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
    line-height: 1.4;
    display: flex;
    align-items: center;
    padding: 5px 20px;
}

.last_section {
    height: 100vh;
    position:relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}
.last_section h3 {
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
.last_section h3 span {}
.last_section > p {
    font-size: 30px;
    text-align: center;
    margin-bottom: 50px;
    line-height: 40px;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
.last_section .choice_box {
    display: flex;
    justify-content: center;
    width: 100%;
}
.last_section .choice_box li {
    width: 40%;
}
.last_section .choice_box li:first-child {
    margin-right: 5%;
}
.last_section .choice_box li h4 {
    padding: 5px; padding-left: 30px;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
.last_section .choice_box li .choice_txt {
    background-color: #733434;
    padding: 30px;
    border-radius: 10px;
    height: 100%;
    max-height: 460px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
.last_section .choice_box li .choice_txt p {
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 38px;
}

.footer_bg {
    width: 100%;
    position: absolute;;
    bottom: 0;
    left: 0;
    z-index: -2;
}
.footer_line {
    position: relative;
    background-color: #E6C2C2;
    height: 22px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) ;
}
.footer {
    background-color: #D07979;
    height: 188px;
}



/*-------------------------------scroll-------------------------------*/
.scroll {
    position:fixed;
    right:70px; bottom: 10%;
    padding-top: 80px;
    z-index:99999;
    color:#fff;
    transition:opacity 300ms ease-out;
    pointer-events: none;
}
.scroll span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    opacity: 0;
    box-sizing: border-box;
}
.scroll span:nth-of-type(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.scroll span:nth-of-type(2) {
    top: 16px;
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}
.scroll span:nth-of-type(3) {
    top: 32px;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
@-webkit-keyframes sdb {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
}
}
@keyframes sdb {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}