@charset "utf-8";

.section1 {width:100%; height:100vh;}
.swiper-container {width:100%; height:100%;}
.slide {display:flex; padding-left:10%; align-items:center; position:relative; text-align:left; font-size:18px; background:#fff; overflow:hidden;}
.slide-image { position:absolute; top:-200px; left:-200px; width:calc(100% + 400px); height:calc(100% + 400px); background-position:50% 50%; background-size:cover;}
.slide-title {font-size:3.7rem; line-height:1; max-width:80%; white-space:normal; word-break:break-word; color:#fff; z-index:100; font-family:"Oswald", sans-serif; text-transform: uppercase;
font-weight: normal; letter-spacing:-.5px; line-height:1.2; margin-bottom: 3rem; transform: translateY(50px); opacity: 0; transition: transform 0.5s ease-out , opacity 0.5s ease-out
}

.slide-title span {white-space:pre; display:inline-block; opacity:0;}
.slide-title em {display:block; font-weight:600;}
.slideshow {position:relative;}
.slideshow-pagination {display:flex; flex-wrap:wrap; align-items:center; transition:0.3s opacity;}
.slideshow-pagination-item {display:flex; align-items:center;}
.slideshow-pagination-item .pagination-number {opacity:0.5;}
.slideshow-pagination-item:hover, .slideshow-pagination-item:focus {cursor:pointer;}
.slideshow-pagination-item:last-of-type .pagination-separator {width:0;}
.slideshow-pagination-item.active .pagination-number {opacity:1;}
.slideshow-pagination-item.active .pagination-separator {width:10vw;}
.slideshow-navigation-button {display:flex; justify-content:center; align-items:center; height:22px; width:22px; border:2px solid #fff; border-radius:30px; transition:all 0.3s ease; color:#fff;}
.slideshow-navigation-button:hover, .slideshow-navigation-button:focus {cursor:pointer; background:rgba(0, 0, 0, 0.5);}
.pagination-number {padding:0 0.5rem; font-size:1.8rem; color:#fff;}
.pagination-separator {display:none; position:relative; width:40px; height:2px; background:rgba(255, 255, 255, 0.25); transition:all 0.3s ease;}

.pagination-separator-loader {position:absolute; top:0; left:0; width:100%; height:100%; background:#ffffff; transform-origin:0 0;}
.animation_text {opacity:0; transform:translateY(40px); transition:none;}

.slideshow_controll {position:absolute; left:10%; bottom:8rem; width:100%; z-index:1;}
.slideshow_controll .swiper-pagination-bullet {width:auto; height:auto; font-size:1rem; color:#fff; background-color:transparent; opacity:.6;}
.slideshow_controll .swiper-pagination-bullet-active {background-color:transparent;  opacity:1;}
.slideshow_controll .swiper-pagination-bullet::after {content:""; display:inline-block; margin:-3px 1rem 0 1rem; width:6px; height:6px; vertical-align:middle; border-radius:30px; background-color:#fff;}
.slideshow_controll .swiper-pagination-bullet:last-child::after {margin:0; width:0; height:0; background-color:transparent;}
.slideshow-navigation {margin-left:1rem;}
.slideshow-navigation .slideshow-navigation-button {margin:0 3px;}
.slideshow-navigation .slideshow-navigation-button span {font-size:.75rem;}
.slideshow-navigation .slideshow-navigation-button .fa-chevron-left {margin-left:-2px;}
.slideshow-navigation .slideshow-navigation-button .fa-chevron-right {margin-right:-2px;}

.mm_visual1 {background:url("../img/main/img_mm_visual1.jpg") no-repeat center;}
.mm_visual2 {background:url("../img/main/img_mm_visual2.jpg") no-repeat center;}
.mm_visual3 {background:url("../img/main/img_mm_visual3.jpg") no-repeat center;}

.swiper-slide-active .mm_visual1,
.swiper-slide-active .mm_visual2,
.swiper-slide-active .mm_visual3 {animation: imgScale 2.5s forwards;}
@keyframes imgScale {
    0%{transform:scale(1.3);}
    100%{transform:scale(1);}
}

[class*="section"] {display:flex; justify-content:center; height:100vh;} 
.section2 .tit_box {display:block; width:100%; z-index:1;}

.section2 .tit_box .mm_caption {display:block; font-size:1.2rem; color:#04c7ff; text-align:center; margin-bottom:2rem; transform: translateY(50px); opacity: 0; transition: transform 0.5s ease-out , opacity 0.5s ease-out}
.section2 .tit_box .mm_caption::before {content:""; display:block; margin:1rem auto; width:79px; height:79px; background:url("../img/main/ico_section2.png") no-repeat 0 0;}
.section2 .tit_box .mm_tit {display:block; padding:3rem 0 1.7rem; font-size:3.8rem; font-weight:600; text-align:center; letter-spacing:-3px; transform: translateY(50px); opacity: 0; transition-property: opacity ,transform; transition-timing-function: ease-out; transition-duration: 0.5s; transition-delay: 0.2s}
.section2 .tit_box .mm_txt {display:block; font-size:1.3rem; text-align:center; transform: translateY(50px); opacity: 0; transition-property: opacity ,transform; transition-timing-function: ease-out; transition-duration: 0.5s; transition-delay: 0.4s}
.section2.active .tit_box .mm_caption, .section2.active .tit_box .mm_tit, .section2.active .tit_box .mm_txt {opacity:1; transform:unset;} 

.main .sect_tit_box {position: relative}
.main .sect_tit_box .desc {font-size: 2.5rem; font-weight: 700; margin-bottom: 3rem; transform: translateY(50px); opacity: 0; transition: transform 0.5s ease-out , opacity 0.5s ease-out }
.main .sect_tit_box .en_tit {font-size:10rem; font-weight: 700; font-family: "Outfit", sans-serif; line-height: 1.2; transform: translateY(50px); opacity: 0; transition: transform 0.5s ease-out , opacity 0.5s ease-out }
.main .sect_tit_box .tit {font-size: 5.5rem; line-height: 1.3; font-weight: 700; transform: translateY(50px); opacity: 0; transition-property: opacity ,transform; transition-timing-function: ease-out; transition-duration: 0.5s; transition-delay: 0.2s}
.main .sect_tit_box .tit + .tit {margin-top: 6rem; transition-delay: 0.4s}
.main .sect_tit_box .tit + .tit + .txt {transition-delay: 0.6s}
.main .sect_tit_box .txt {margin-top: 1.5em; font-size: var(--txt); transform: translateY(50px); opacity: 0; transition-property: opacity ,transform; transition-timing-function: ease-out; transition-duration: 0.5s; transition-delay: 0.4s}
.main .sect_tit_box .en_tit + .txt {transition-delay: 0.2s}
.main .sect_tit_box .com_btn {position: absolute; right: 0; bottom: 0; transform: translateY(50px); opacity: 0; }

.swiper-slide-active .slide-title {opacity:1; transform:unset;}
.swiper-timer {margin-left:1.5rem; width:8rem; height:3px; background-color:rgba(255, 255, 255, 0.2); overflow:hidden;}
.swiper-timer-progress {width:0%; height:100%; background-color:#fff; transition:none;}

.section2 {position:relative; overflow:hidden; background-color:#fff; z-index:1;}
.bg_overlay {position:absolute; bottom:-47rem; display:block; margin:0 auto; width:50%; height:100%; overflow:hidden; transition:0.3s ease-out;}
.bg_overlay img {display:block; width:100%; transition: 0.3s ease-out;}
.overlay_layer {position:absolute; inset:0; background-color:rgba(0, 0, 0, 0); opacity:0; pointer-events:none; z-index:1; transition:0.3s ease-out;}

.section3 {height:auto !important;}
.section3 .mm_tit {display:block; padding:6% 0; width:100%; font-size:3.8rem; font-weight:600; text-align:center; letter-spacing:-3px; transform: translateY(50px); opacity: 0; transition: transform 0.5s ease-out , opacity 0.5s ease-out}
.section3.active .mm_tit {opacity:1; transform:unset;} 

.mm3_box {width:100%;}
.mm3_box .panel {position:relative; width:33.3%;  height:35rem; transition: 0.5s ease;}
.mm3_box .panel.pan1 {background:url("../img/main/img_mm_section3_1.jpg") no-repeat center; background-size:cover;}
.mm3_box .panel.pan2 {margin:0 2px; background:url("../img/main/img_mm_section3_2.jpg") no-repeat center; background-size:cover;}
.mm3_box .panel.pan3 {background:url("../img/main/img_mm_section3_3.jpg") no-repeat center; background-size:cover;}
.mm3_box .panel::after {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, .45); z-index:0;}
.mm3_box .panel:hover {width:50%; transition: 0.5s ease;}
.mm3_box .panel:hover::after {background-color:rgba(0, 0, 0, .1); transition: 0.5s ease;}
.mm3_box .text_box {position:absolute; left:4rem; bottom:4rem; font-size:1.5rem; color:#fff; z-index:1;}
.mm3_box .text_box strong {font-size:2.2rem; font-weight:600;}
.mm3_box .text_box p {margin-top:1rem; max-height:0; font-size:1.3rem; font-weight:300; line-height:1.3; opacity:0; overflow:hidden; transition: max-height .2s ease, opacity 1s ease;}
.mm3_box .panel:hover .text_box p {max-height:200px; opacity:1; transition: 1s ease;}

/* 퀵메뉴 */
.quick_menu {position:fixed; right:2rem; bottom:3rem; display:flex; flex-direction:column; gap:.8rem; z-index:7; transition:ease .2s;}
.quick_menu.stop {bottom:18rem; transition:ease .2s;}
.quick_menu a, .quick_menu span {width:78px; height:78px; border-radius:50%; background: #fff; color: #000; font-size:0.85rem; font-weight: 600; text-align: center;
    text-decoration: none; display:flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); transition: transition 0.3s ease;
}
.quick_menu a.medical {background-color:#75c949; color:#fff; transition:.2s ease;}
.quick_menu a.medical:hover {background-color:#48c109; transition:.2s ease;}
.quick_menu a.contact {background-color:#00b9cc; color: #fff; transition:.2s ease;}
.quick_menu a.contact:hover {background-color:#00a4b5; transition:.2s ease;}
.quick_menu span.scroll {background-color:#fff; color:#000;}
.quick_menu a::before, .quick_menu span::before  {content:""; display:block; width:35px; height:35px; background:url("../img/main/ico_quick_menu.png") no-repeat 0 0;}
.quick_menu a.medical::before {background-position:0 0;}
.quick_menu a.contact::before {background-position:0 -35px;}
.quick_menu span.scroll::before {background-position:0 -70px;}