/* 메인화면 */
.main section:not(.main-visual, section:has(.schedule-wrap)) {margin-top: 9rem;}

/* 메인 팝업 */
body.modal-open:has(.indexModal) {overflow-y: scroll !important; padding-right: 0 !important;}
.modal.indexModal {max-width: 500px; width: calc(100% - 3rem); height: auto; padding: 0 !important; left: 4rem; top: 50%; transform: translateY(-50%);}
.modal.indexModal .modal-body {padding: 0 !important; max-height: 500px;}
.modal.indexModal .modal-body img {width: 100%; height: 100%;}
@media (max-width: 767.98px) {
    .modal.indexModal {left: 50%; transform: translate(-50%, -50%);}
}

/* 메인 header 스타일 */
.main #header {background: none; border-bottom: 1px solid rgba(227, 230, 235, 0); margin-top: -1px;}
.main #header .logo a {color: white;}
.main #header.on .logo a {color: var(--bs-primary);}

.main #header.on, .main #header.mobile-open {background: #fff; border-bottom: 1px solid var(--bs-gray-200);}
.main #header .nav .item .top { color: white;}
.main #header.on .nav .item .top {color: var(--bs-gray-800);}
.main #header .pc-gnb .material-symbols-outlined {color: white !important;}
.main #header.on .pc-gnb .material-symbols-outlined {color: var(--bs-gray-800) !important}
.main #header.mobile-open #hamburger span {background: var(--bs-gray-700);}
.main #header #hamburger span {background: white;}
.main #header.mobile-open #hamburger span { background: var(--bs-gray-700); }
.main #header.mobile-open {background-color: white;}
.main #header .pc-gnb > a.btn {color: white !important; border-color: white;}
.main #header .pc-gnb:hover > a.btn {color: white; background: rgba(255, 255, 255, 0.1);}
.main #header.on .pc-gnb > a.btn {color: #2e3947 !important; border-color: #a9b7c7;}
.main #header.on .pc-gnb:hover > a.btn {background: #f4f6fb;}

/* .main #header .nav-background {display: none;} */
.main.modal-open #header {background: none; border: none; }
.main.modal-open #header .nav .item .top {color: white;}

.main.modal-open #header.on {background: white; border-bottom: 1px solid var(--bs-gray-200); }
.main.modal-open #header.on .nav .item .top {color: var(--bs-gray-800);}

/* 메인비주얼 */
.main-visual {height: 100vh; min-height: 600px;}
.main-visual .carousel {height: 100vh; min-height: 600px;}
.main-visual .carousel-caption {right: 50%; left: auto; bottom: calc(570px + 4%); transform: translate(50%, 50%); max-width: 767.98px; padding: 0;}

.main-visual .carousel-text-1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.25rem, 6.5vw, 4rem); text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.25);}
.main-visual .carousel-text-1 span {font-size: clamp(3rem, 7.5vw, 5rem);}
.carousel-caption > p {text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);}
/* @media (min-width: 767.98px){
.main-visual .carousel-text-1 {font-size: 3rem;}
.main-visual .carousel-text-1 span {font-size: 4rem;}
}
@media (min-width: 991.98px){
.main-visual .carousel-text-1 {font-size: 4rem;}
.main-visual .carousel-text-1 span {font-size: 4.5rem;}
.carousel-caption > p {max-width: 380px;} } */

@keyframes heroTextAni1 {
    0% {transform: translateX(0%); opacity: 1;}
    100% {transform: translateX(-3rem); opacity: 0;}
}

@keyframes heroTextAni2 {
    0% {transform: translate(calc(-50% + 3rem), -50%); opacity: 0;}
    100% {transform: translate(-50%, -50%); opacity: 1;}
}

.main-visual .hero-text > div:first-child {
    animation: heroTextAni1 1.5s ease forwards;
}
.main-visual .hero-text > div:last-child {
    opacity: 0;
    transform: translate(-30%, -50%);
}
.main-visual .hero-text > div:last-child {
    animation: heroTextAni2 1.5s ease 0.6s forwards;
}

/* 신청 바로가기 */
.main-visual .link-wrap {position: absolute; left: 50%; bottom: 3rem; transform: translateX(-50%); word-break: keep-all; max-width: 991.98px; min-height: calc(100% - 7.5rem);}
.main-visual .link-wrap .center-adress > div:last-child > div {transition: all 0.3s ease;}
.main-visual .link-wrap .center-adress > div:last-child > div:hover {background: rgba(0, 0, 0, 0.3);}
.main-visual .link-wrap .center-adress > div:last-child > div > img {width: 35px;} 
.main-visual .link-wrap .link-title img {filter: invert(1);}
.main-visual .link-wrap ul {grid-template-columns: repeat(5, 1fr); justify-items: stretch; align-items: stretch; justify-items: center;}
.main-visual .link-wrap ul li, .main-visual .link-wrap .center-adress > div:last-child {backdrop-filter: blur(1px); background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(199, 210, 221, 0.5); transition: all 0.3s; box-shadow: 0 .5rem 1rem rgba(0,0,0,.2)}
.main-visual .link-wrap .center-adress .btn:hover,  .main-visual .link-wrap .center-adress > div:last-child:hover {transform: translateY(0.2rem);}
/* .main-visual .link-wrap ul li:first-child, .main-visual .link-wrap ul li:nth-child(2) { background-color: #1a73e834; } */
.main-visual .link-wrap ul li:hover {transform: translateY(0.2rem); box-shadow: 0.2rem .75rem 1rem rgba(0,0,0,.2)}
.main-visual .link-wrap ul li a {color: white; transition: all 0.3s;}
.main-visual .link-wrap ul li svg {width: 2.25rem; height: 2.25rem; border-radius: 10px;}
/* .main-visual .link-wrap ul li:first-child svg {width: 36px; height: 32px;} */
.main-visual .link-wrap .st1 {fill:none;stroke:white;stroke-width:1.25;stroke-linecap:round;}
.main-visual .carousel-control-next-icon, .main-visual .carousel-control-prev-icon {width: 3.5rem; height: 3.5rem;}


.center-link .box {
    backdrop-filter: blur(1px);
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}
.center-link .box.white {
    background: rgba(255, 255, 255, 0.7);
}

.center-link .box.primary {
    background: rgba(7, 97, 233, 0.8);
}

.center-link .box:hover {
    transform: translateY(0.2rem);
}
.center-link .box.white:hover {
    background: rgba(255, 255, 255, 0.8);
}
.center-link .box.primary:hover {
    background: rgba(13, 110, 253, 0.9);
}
/* our service */
.slideshow .slide {
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 1.5rem;
    width: 14rem; height: 18rem; margin: 1.5rem; text-align: center; }
.slideshow .slide img{max-height: 45%; width: auto;}
.slideshow .flickity-button {display: none;}

/* 스케줄 */
section:has(.schedule-wrap) {margin-top: 4rem;}
.schedule-wrap .schedule {grid-template-columns: 1fr 27% 27% 1fr; grid-template-rows: 1fr;}

/* carousel slider 공통 */
.carousel { height: 100%; } 
.carousel .carousel-cell {width: 100%; height: 100%; overflow: hidden;}
.carousel .carousel-cell img {width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
.carousel .flickity-prev-next-button.previous {left: 1rem;}
.carousel .flickity-prev-next-button.next {right: 1rem;}
.flickity-page-dots .dot { transition: all 0.3s;}
.flickity-page-dots .dot {border-radius: 5px; margin: 0 5px;}
.flickity-page-dots .dot.is-selected {background-color: var(--bs-primary);}

/* 배너 */
.banner-wrap .col {height: 25rem;}

/* 배너 슬라이드 1 */
.banner-wrap .banner-slide-1 .carousel-cell {margin-right: 1rem; height: 25rem; overflow: hidden; counter-increment: carousel-cell; }
.banner-wrap .banner-slide-1 .flickity-button {display: none;}
.banner-wrap .banner-slide-1 .flickity-page-dots {bottom: 1rem; counter-reset: dotcount;}
.banner-wrap .banner-slide-1 .flickity-page-dots .dot.is-selected {background-color: var(--bs-primary); width: 35px;}
/* .banner-wrap .banner-slide-1 .flickity-page-dots li:before{ counter-increment: dotcount; content: counter(dotcount); display: inline-block; font-size: 1rem;} */

/* 배너 슬라이드2 */
.banner-wrap .banner-slide-2 .carousel-cell {height: 25rem;}
.banner-wrap .banner-slide-2 .carousel-inner {height: 100%;}
.banner-wrap .banner-slide-2 .carousel-item {height: 100%;}

/* 환율 */
.banner-wrap .exchange-rate {background-image: url('/assets/images/exchange.jpg'); background-position: 50% 50%; background-size: cover; position: relative;}

/* shortcut 바로가기 */
.shortcut-wrap .shortcut a img {transition: 0.3s all;}
.shortcut-wrap .shortcut a:hover img {opacity: 0.8; transform: scale(1.05);}


/* 공지사항 */
/* .notice .flickity-slider {display: flex; flex-direction: row; align-items: stretch;} */
.notice .carousel-cell {width: 25%; margin-right: 2rem; height: 212px; display: flex;}
.notice .flickity-viewport {overflow: unset;}
.notice .control-group button {padding: 0; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; }
.notice .control-group button.inactive {opacity: 0.5; cursor: default;}





/* flichity carousel slide */
.carousel .flickity-button {transition: all 0.2s; background: rgba(0, 0, 0, 0.2);}
.carousel .flickity-button:hover {background: rgba(0, 0, 0, 0.3)}
.carousel .flickity-button .flickity-button-icon {width: 50%; height: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); fill: white; transition: all 0.2s;}
.carousel .flickity-button:hover .flickity-button-icon {fill: white;}

/* bootsttrap carousel slide */
.slide .carousel-control-next, .carousel-control-prev {width:auto; height: max-content; top: 50%; bottom: auto; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.4); border-radius: 100%;}
.slide .carousel-control-prev {left: 1.25rem;}
.slide .carousel-control-next {right: 1.25rem}
.slide .carousel-control-next-icon, .slide .carousel-control-prev-icon {background-size: 50%; width: 2.5rem; height: 2.5rem;}
.slide .carousel-control-prev-icon {background-position-x: 40%;}
.slide .carousel-control-next-icon {background-position-x: 55%;}
.slide .carousel-control-prev-icon {background-image: url(/assets/icons/arrow-chevron-angular-next.svg); transform: rotate(180deg);}
.slide .carousel-control-next-icon {background-image: url(/assets/icons/arrow-chevron-angular-next.svg); }


form.contact :where(input:focus, textarea:focus, input.hasValue, textarea.hasValue){background: rgba(255, 255, 255, 0.55) !important;}
form.contact textarea::placeholder, form.contact input::placeholder {color: white !important;}

/* // `xl`*/
@media (max-width: 1199.98px) {
    .main section:not(.main-visual, section:has(.schedule-wrap)) {margin-top: 7rem;}
    section:has(.schedule-wrap) {margin-top: 3.5rem;}
    .main-visual .carousel-caption {bottom: 530px}
    .main-visual .carousel-control-next-icon, .main-visual .carousel-control-prev-icon {width: 2.5rem; height: 2.5rem;}
    .slide .carousel-control-next-icon {background-position-x: 55%;}
    .slide .carousel-control-prev-icon { background-position-x: 45%; }
    .slideshow .slide {margin: 1rem;}
    .shortcut-wrap .carousel-cell {width: 220px}
}

@media (max-width: 991.98px) {
    .main section:not(.main-visual, section:has(.schedule-wrap)) {margin-top: 4rem !important;}
    section:has(.schedule-wrap) {margin-top: 3rem;}    
    .main #header .nav-wrap {top: 59px;}
    .main #header.mobile-open .logo a {color: var(--bs-primary);}
    .main #header .nav .item .top {color: var(--bs-gray-800);}
    .main #header.on #hamburger span {background: var(--bs-gray-800);}



    .main-visual {height: auto;}
    .main-visual .carousel {height: 80vh; min-height: 400px;}
    .main-visual .carousel-caption {margin-bottom: 0; width: max-content; bottom: 50%;}
    .carousel-caption > p {max-width: 250px;}
    /* 신청 바로가기 */
    .main-visual .link-wrap {position: static; transform: none; left: 0; bottom: auto; width: calc(100% - 2.5rem) !important;margin-top: -5rem; background: none;}
    .main-visual .link-wrap .center-adress > div:last-child {display: grid; grid-template-columns: repeat(5, 1fr); box-shadow: none; backdrop-filter: none; background: var(--bs-light); border: none ;}
    .main-visual .link-wrap ul li:hover, .main-visual .link-wrap .center-adress > div:last-child:hover {transform: none; box-shadow: none; }
    .main-visual .link-wrap ul li {background: var(--bs-secondary); box-shadow: none; border-color: var(--bs-gray-200);}
    .main-visual .link-wrap ul li svg {filter: brightness(0.4);}
    .main-visual .link-wrap ul li a {color: var(--bs-gray-800);}
    /* .main-visual .link-wrap ul li a {color: var(--bs-body-color); text-align: left; background: none; width: max-content !important;} */
    /* .main-visual .link-wrap ul li svg {width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--bs-primary); padding: 0.75rem;} */
    .main-visual .link-wrap .link-title p {font-weight: 700; font-size: calc(1.275rem + 0.3vw);}
    .main-visual .link-wrap .center-adress > div:last-child > div:hover {background: none;}
    .main-visual .link-wrap .center-adress > div:last-child > div >img {width: 40px;}
    .main-visual .hero-text {
        position: absolute !important;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 100%;
        min-height: 500px;
    }
    .main-visual .hero-text >div {width: 100%;}

    .main-visual .hero-image-wrap {
        min-height: 500px;
    }
    /* 나의 배송대행주소 보이기 */
    /* .main-visual .link-wrap ul li:last-child {display: block !important;} */

    .slideshow .slide {width: 12.5rem; height: 16rem;}


    .banner-wrap .col:first-child {height: auto; background-color: white !important;}
    .banner-wrap .col:first-child .banner {background-color: white !important; margin-bottom: -1.5rem;}
    .shortcut-wrap a {background-color: var(--bs-light); padding: 2rem;}

    .notice .carousel-cell {width: 33.33%;}

    .center-link .box.white{background: hsla(223, 47%, 97%, 0.9); box-shadow: 0 .25rem 0.5rem rgba(0, 0, 0, .15);}
    .center-link .box.white:hover {background: var(--bs-light);}

    .center-link .box:hover {transform: none !important;}
    .center-link .box.notice{background: var(--bs-light);}
    .center-link .box.primary{box-shadow: none; border: none; background: var(--bs-primary-bg-subtle); color: var(--bs-body-color) !important;}

}
@media (max-width: 780px) {
    /* .main-visual .link-wrap .center-adress > div {display: grid; grid-template-columns:repeat(6, 1fr);} */
}

@media (max-width: 780px) {
    .schedule-wrap .schedule {grid-template-columns: 1fr 1fr;}
    .schedule-wrap .schedule > div:nth-child(4) {grid-column: 2/3; grid-row: 1/2;}
}

/* // `md`*/
@media (max-width: 767.98px) {
    .main section:not(.main-visual, section:has(.schedule-wrap)) {margin-top: 3rem !important;}
    section:has(.schedule-wrap) {margin-top: 3rem;}    

    .banner-wrap .col:nth-child(2), .banner-wrap .col:nth-child(4) {height: 19rem;}
    .banner-wrap .banner-slide-1 .carousel-cell, .banner-wrap .banner-slide-2 .carousel-cell, .banner-wrap .exchange-rate {height: 19rem; }
    .notice .carousel-cell {width: 90%; margin-right: 1.25rem;}
    .shortcut-wrap a {background-color: var(--bs-light); padding: 1.5rem;}


}
@media (max-width: 675.98px) {
    .main-visual .link-wrap ul {grid-template-columns: repeat(18 ,1fr); }
    .main-visual .link-wrap ul li:first-child {grid-column: 1/10;}
    .main-visual .link-wrap ul li:nth-child(2) {grid-column: 10/19;}
    .main-visual .link-wrap ul li:nth-child(3) {grid-column: 1/7;}
    .main-visual .link-wrap ul li:nth-child(4) {grid-column: 7/13;}
    .main-visual .link-wrap ul li:nth-child(5) {grid-column: 13/19;}
    .main-visual .link-wrap ul li svg {width: 2.5rem; height: 2.5rem; padding: 0.35rem;}

    .main-visual .link-wrap .center-adress > div:last-child { grid-template-columns: 1fr 1fr 1fr;}
    .main-visual .link-wrap .center-adress > div:last-child > div {gap: 1rem; justify-content: center; align-items: center;}
    .main-visual .link-wrap .center-adress > div:last-child > div span{margin-top: 0 !important; font-weight: 600;}
    .main-visual .link-wrap .center-adress > div:last-child > div >img {width: 35px}
}


/* // `sm` */
@media (max-width: 575.98px) {
    .main-visual .carousel-caption {width: calc(100% - 5rem); max-width: 380px;}
    .main-visual .carousel-text-1 {text-align: center !important;}
    .schedule-wrap .schedule {grid-template-columns: 1fr 1fr;}
    .schedule-wrap .schedule > div:nth-child(2) {grid-column: 1/3; grid-row: 2/3;}
    .schedule-wrap .schedule > div:nth-child(3) {grid-column: 1/3; grid-row: 3/4;}
    .shortcut-wrap .carousel-cell {width: 100%; background-color: var(--bs-light); padding: 1.5rem;}
    .shortcut-wrap .carousel-cell {width: 100%;}


}



/* // `sm` */
@media (max-width: 359.98px) {   
    .main-visual .link-wrap ul {grid-template-columns: repeat(6, 1fr); row-gap: 1rem !important;}
    .main-visual .link-wrap ul li:first-child {grid-column: 1/4;}
    .main-visual .link-wrap ul li:nth-child(2) {grid-column: 4/7;}
    .main-visual .link-wrap ul li:nth-child(3) {grid-column: 1/3;}
    .main-visual .link-wrap ul li:nth-child(4) {grid-column: 3/5;}
    .main-visual .link-wrap ul li:nth-child(5) {grid-column: 5/7;}
    
}


@keyframes gnb-hover {
0% {transform: translateY(-100%)} 
100% {transform: translateY(0);}   
}