/* section-1 */
#main-page .section-1 { position: relative; padding: 150px 50px 40px; margin: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; background: var(--color-blue); color: #fff; min-height: 100vh; width: 100%; }
#main-page .section-1 .section-1-top { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
#main-page .section-1 .section-1-top > p { flex: 1; }
#main-page .section-1 .section-1-top > p:last-child { line-height: 1.6; opacity: 0.95; }
#main-page .section-1 .section-1-bottom { width: 100%; }
#main-page .section-1 .section-1-bottom img { width: 100%; height: auto; display: block; pointer-events: none; }

@media (max-width: 1024px) {
    #main-page .section-1 { padding: 120px 30px 30px; flex-direction: column; }
    #main-page .section-1 .section-1-top { flex-direction: column; gap: 16px 0; max-width: 620px; }    
}

/* section-2 */
#main-page .section-2 { position: relative; padding: 100px 50px; background: var(--color-deepblue); color: #fff; display: flex; flex-direction: column; gap: 40px 0; }
#main-page .section-2-top { display: flex; flex-direction: column; gap: 16px 0; }
#main-page .section-2-top p:last-child { line-height: 1.6; opacity: 0.9; }
#main-page .section-2-bottom { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden; }
#main-page .section-2-bottom > ul { position: relative; width: 100%; padding: 0; display: flex; gap: 0; }
#main-page .section-2-bottom > ul > li { position: relative; flex: 1; background: #000; overflow: hidden; border-radius: 16px; }
#main-page .section-2-bottom > ul > li img { opacity: 0.8; display: block; }
#main-page .section-2-bottom > ul > li .section-2-txt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 12px 0; padding: 40px 30px; opacity: 0.9; }

@media (max-width: 1024px) {
    #main-page .section-2 { padding: 60px 0; gap: 40px 0; }
    #main-page .section-2-top { padding: 0 30px; max-width: 400px; }
    #main-page .section-2-bottom { width: 100%; margin: 0 auto; }
    #main-page .section-2-bottom > ul { width: calc(100% - 60px); }
    #main-page .section-2-bottom > ul > li { border-radius: 12px; flex: none; width: 65%; min-width: 200px; max-width: 380px; }
    #main-page .section-2-bottom > ul > li:last-child { margin-right: 60px; }
    #main-page .section-2-bottom > ul > li .section-2-txt { gap: 10px 0; padding: 28px; }
}

@media (max-width: 768px) {
    #main-page .section-2-bottom > ul > li .section-2-txt { padding: 24px; }
}

/* main slider */
#main-page .section-3 { position: relative; overflow: hidden; width: 100%; min-height: 100vh; }
#main-page .section-3 > .section-3-common-info { position: absolute; width: 80%; top: 80px; left: 50px; display: flex; flex-direction: column; align-items: flex-start; display: flex; flex-direction: column; gap: 16px 0; z-index: 9; }
#main-page .section-3 > .section-3-common-info p:last-child { line-height: 1.6; opacity: 0.9; }
#main-page .section-3 > .section-3-common-info .swiper-pagination { position: relative; margin-top: 20px; }
#main-page .section-3 > .section-3-common-info .swiper-pagination .swiper-pagination-bullet { width: 30px; height: 4px; background: transparent url("../../img/icon/icon-hamburger-line.svg") center center / 90% auto no-repeat; opacity: 0.6; }
#main-page .section-3 > .section-3-common-info .swiper-pagination .swiper-pagination-bullet-active { opacity: 1; background-color: transparent; }
#main-page .section-3 > ul { position: relative; width: 100%; height: 100%; min-height: 100vh; }
#main-page .section-3 > ul > li { position: relative; width: 100%; height: 100%; min-height: 100vh; padding: 80px 50px; background-position: center; background-repeat: no-repeat; background-size: cover; }
#main-page .section-3 > ul > li a { position: relative; display: block; width: 100%; height: 100%; }
#main-page .section-3 > ul > li .section-3-txt { position: absolute; bottom: 6%; left: 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
#main-page .section-3 > ul > li .section-3-txt button { margin-top: 14px; display: inline-block; }

@media (max-width: 1024px) {
    #main-page .section-3 > .section-3-common-info { top: 50px; left: 30px; max-width: 320px; }
    #main-page .section-3 > .section-3-common-info .swiper-pagination .swiper-pagination-bullet { width: 28px; height: 3px; }
    #main-page .section-3 > ul { max-height: 450px; }
    #main-page .section-3 > ul > li { padding: 50px 30px; }
    #main-page .section-3 > ul > li .section-3-txt { left: 30px; }
    #main-page .section-3 > ul > li .section-3-txt button { margin-top: 12px; }
}